feat: Add support for code titles, language info and copy button

[jletey]

• Code titles
• Language info
• Copy button

Closes #212
Related gatsbyjs/gatsby#15834

[jletey]

@jxnblk Also, what are your opinion on #212 (comment), as we should include all of the language colors built in for the language info

Also, which one of these icons do you like better? #212 (comment) These would be for the copy button, which has been decided that it should have an icon instead of the "Copy"/"Copied" text #212 (comment) (although I think that this shouldn't be default, and could maybe be stored in a variant?)

[jxnblk]

Personally, I'd rather see a text label for copy, but I think we can add a prop to the Prism component to allow any element to be passed in

[jletey]

@jxnblk and whoever else is following this PR, I have just pushed a commit with code that I believe adds support for a copy button!

I'm not exactly quite if it works (as I have yet to find a way of testing the code locally), so would love feedback!

Please note that the code for this feature was either adapted or lifted from the Gatsby source, which should be fine as they are using the MIT license

Also note that I have yet to add support for custom icons instead of just the plain "Copy" text

[sonapraneeth-a]

@johnletey , Do you have a screenshot of the rendered output?

[jletey]

@sonapraneeth-a Like I said above, I don't know how to run the package locally ... would love some advice and I'd be happy to try to run it locally!

[jxnblk]

@johnletey if you're able to run the docs site locally with yarn start, it should render all code examples with the Prism component, see: https://github.com/system-ui/theme-ui/blob/master/packages/docs/src/gatsby-plugin-theme-ui/components.js#L26

This line could change to pass props to the component:

// example
code: props => <Prism {...props} copy={true} />,

[jletey]

Wow ... I'll have to try this out! Thanks @jxnblk

Overall though, how does the code look?

[jxnblk]

@johnletey are you still interested in working on this? If not, I think we can close this PR out for the time being

[jletey]

@jxnblk Sorry for the late reply. Unfortunately, I don't think I will have much time to work on this in the future, so I am going to go ahead and close this.

If there is anyone that wants to continue on this, go for it!