Update codeblocks on index to use the Highlight component

[bryanjos]

Just like the HTML sections in the ExampleSection component.

This is so that all the examples are using the same theme and act the same for maintainability.

Once that works, the following can be removed

• https://github.com/revelrylabs/harmonium/blob/master/docs-src/src/Headers.js#L33-L39
• https://github.com/revelrylabs/harmonium/blob/master/docs-src/src/layouts/index.js#L39-L46
• https://github.com/revelrylabs/harmonium/blob/master/docs-src/src/layouts/index.scss#L3
• Remove the file docs-src/layouts/_prism-lucario-theme.scss

Some code that may be helpful

import theme from "prism-react-renderer/themes/palenight";
import Highlight, { defaultProps } from "prism-react-renderer";

function Example({ code, language }) {
  return (
    <Highlight {...defaultProps} code={code} language={language} theme={theme}>
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre className={className} style={style}>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
  );
}

const code = "npm install --save harmonium"

<Example code={code} language="bash" />

const code = `/* myapp.scss */
@import '~harmonium/scss/app';
/* your styles here; */`

<Example code={code} language="scss" />

[BenRongey]

Hey quick question @bryanjos. Should I branch this off of the master branch or the design-token-setup branch?

[bryanjos]

Fixed in Harmonium 6.0.0