[@theme-ui/prism] Add support for code titles, language info and copy button

[sonapraneeth-a]

As mentioned in https://github.com/gatsbyjs/gatsby/pull/15834/files, it would be good to have code title and copy button support for theme-ui

[jletey]

@jxnblk If this is a feature that you want to see in @theme-ui/prism (I do 😄), then I'd be more than happy to work on this!

[johno]

That'd be great @johnletey 😺

[johno]

Though I'd also add that the copy functionality should be opted into with a meta string.

```js title=foo.js copy=true
// ...
```

[sonapraneeth-a]

That would also be a good idea. Also, in place of Copy button as text, we can have a something like a copy icon which might look good. What do you think, @johno ?

[johno]

I can dig it 👍

[jletey]

All great ideas guys! I will try to have something up by tomorrow!

[jletey]

BTW @johno ... what is the best way to run @theme-ui/prism in development?

[johno]

Hm, right now it's a bit hacky. I just reran the build and then restarted the docs server : )

We could also set up a small dev site in the workspace that uses gatsby-plugin-compile-es6-packages and then we input from @theme-ui/prism/src for hot reloading.

[jletey]

Got it ... might just try my bet to not mess things up 🤞

[jletey]

Also, in place of Copy button as text, we can have a something like a copy icon which might look good.

@johno @sonapraneeth-a Here are two options for this icon:

The Feather Icons copy icon

The Zwicon copy icon

[jletey]

@johno How exactly do you want to add the language info, because Gatsby uses quite a lot of CSS to create those beautiful language tags

Should I just copy all of the css directly and then put it into an sx tag?

[sonapraneeth-a]

@johnletey , are you using libraries for the icon or are they plain svg files?

[jletey]

@sonapraneeth-a They are just plain SVG file

Note that I haven't implemented anything for the copy feature yet or the language info ... just the code titles

[shawnbot]

Hey all, I know this is probably unrelated, but it would be really great if the fenced code block metastring could be used to pass arbitrary props down to the component that renders the highlighted syntax and/or live preview. We've got a ton of issues with Primer CSS docs (see primer/css#735, primer/css#820, primer/css#841) that could be easily solved if we were able to style the containing element via props rather than putting the props into the code example itself:

```jsx p={2} minHeight={300}
<Dropdown>...</Dropdown>
```

And I feel pretty strongly that the metastring should be parsed properly — as JSX props — so that we can pass stuff like style={{height: 300}} rather than having to parse unquoted key/value pairs. I'm happy to lend test cases and implementation support if y'all need it. ❤️

Addendum: Another way of saying ☝️ is: I think the gatsby-remark-code-titles syntax (js:title=foo.js) is insufficient, and that allowing proper JSX syntax (even if it takes using babel to parse it, IMO) would open up a lot more interesting use cases.

[jletey]

@shawnbot All wonderful ideas ... maybe submit a new issue (or multiple issues) for all of these new features ... and when I'm done implementing the features requested in this issue, I'll start working on those (or you can too if you want too ... as you said)

Addendum: Another way of saying ☝️ is: I think the gatsby-remark-code-titles syntax (js:title=foo.js) is insufficient, and that allowing proper JSX syntax (even if it takes using babel to parse it, IMO) would open up a lot more interesting use cases.

I completely agree with you! Although I was under the impression that we did not follow the gatsby-remark-code-titles syntax already?

[johno]

I completely agree with you! Although I was under the impression that we did not follow the gatsby-remark-code-titles syntax already?

Yeah I'd like to avoid that syntax since it's less standard then metastrings or JSX props. Not to mention it breaks syntax highlighting on GitHub! 😸

[shawnbot]

I completely agree with you! Although I was under the impression that we did not follow the gatsby-remark-code-titles syntax already?

Ah yes, my mistake! I was looking at gatsbyjs/gatsby/#15834 it didn't register that it was removed in the diff. 🤦‍♂

and when I'm done implementing the features requested in this issue, I'll start working on those (or you can too if you want too ... as you said)

Cheers, will do! Thanks for all your hard work on this. 🤘

[alfieqashwa]

how to set line-highlighting using theme-ui/@prism like https://twitter.com/kentcdodds/status/1110276893293473792 ?
thanks

[lachlanjc]

We’re closing this issue, since we don’t want to include this functionality & specific cosmetic choices like icons directly inside Theme UI. You can build this into your own site using custom MDX components (see #1120 as an example).