Build out Highlight component to auto format, consolidate global code styling

[kylesuss]

Build out the Highlight component so that it can work with both:

1. Unformatted code (we have to now pass in a prop to Highlight to tell it what language to use in this case)

.someCode {
  display: block;
}

2. Pre-formatted code (this will come from transformers of some sort, such as gatsby-transformer-remark). This format appears to be a standard and it seems to work well with Prismjs which is the syntax highlighting library in use in this repo. No language required as a prop since the data is already in the markup.

<pre class="language-css"><code class="language-css">
.someCode {
  display: block;
}
</pre></code>

In the process, I noticed some duplication in the global styles that we are exporting for styling pre and code blocks. Those styles have since been moved to the Highlight component.

Heads up @jonniebigodes since I know you were potentially going to be looking at this component.

[kylesuss]

@domyen mind looking at this one? Ultimately, the color scheme in this one will become the "standard" for all of the consumers.

The font size that was defined for code blocks in the global styles is smaller than what we were using on LSB though. That can be customized on a per-app basis, or we can just roll w/ the new smaller size once implemented? What do you think?

[domyen]

LGTM

Re: font size
Let's customize it per situation. LSBs should be bigger than we we'd use in the Chromatic app UI.

[kylesuss]

🚀 PR was released in v1.1.0 🚀