Theme-ui: [@theme-ui/prism] Add support for code titles, language info and copy button
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
sonapraneeth-a
All 19 comments
@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!
jletey
on 24 Jul 2019
That'd be great @johnletey 😺
johno
on 24 Jul 2019
Though I'd also add that the copy functionality should be opted into with a meta string.
```js title=foo.js copy=true
// ...
```
johno
on 24 Jul 2019
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 ?
sonapraneeth-a
on 24 Jul 2019
I can dig it 👍
johno
on 24 Jul 2019
All great ideas guys! I will try to have something up by tomorrow!
jletey
on 24 Jul 2019
BTW @johno ... what is the best way to run @theme-ui/prism in development?
jletey
on 24 Jul 2019
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.
johno
on 24 Jul 2019
Got it ... might just try my bet to not mess things up 🤞
jletey
on 24 Jul 2019
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
copyicon
The Zwicon
copyicon
jletey
on 25 Jul 2019
@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?
jletey
on 25 Jul 2019
@johnletey , are you using libraries for the icon or are they plain svg files?
sonapraneeth-a
on 25 Jul 2019
@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
jletey
on 25 Jul 2019
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 https://github.com/primer/css/issues/735, https://github.com/primer/css/issues/820, https://github.com/primer/css/issues/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:
md
```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.
shawnbot
on 31 Jul 2019
@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-titlessyntax (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?
jletey
on 31 Jul 2019
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! 😸
johno
on 31 Jul 2019
I completely agree with you! Although I was under the impression that we did not follow the
gatsby-remark-code-titlessyntax 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. 🤘
shawnbot
on 31 Jul 2019
how to set line-highlighting using theme-ui/@prism like https://twitter.com/kentcdodds/status/1110276893293473792 ?
thanks
alfieqashwa
on 2 Aug 2019
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).
lachlanjc
on 6 Dec 2020
Related issues
folz
·
3Comments
muhajirdev
·
3Comments
moshemo
·
3Comments
VinSpee
·
3Comments
mxstbr
·
3Comments
Most helpful comment
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 https://github.com/primer/css/issues/735, https://github.com/primer/css/issues/820, https://github.com/primer/css/issues/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:
md ```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-titlessyntax (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.