can't use multiple classes + syntax highlighting in code component

[boneskull]

trafficstars

Detailed description

When using the Code component in JSX, multiple classes in a className property cause syntax highlighting to break.

What did you expect to happen? What happened instead? What would you like to see changed?

I'd expect to be able to apply more than one class to a Code component and retain syntax highlighting, e.g.:

<Code className="language-js foobar">
'some js here';
</Code>

However, the contents of the className prop are passed directly into the Highlight component; it does not recognize js foobar (language- is stripped) as a known language, and does not highlight the code.

Two suggestions to address this:

1. Use a discrete language or lang prop
2. Require (right now, it's optional) the language class name to have a language- prefix, and assign only the matched substring to the language prop (to be passed into the Highlight component).

Out of these two, I'd prefer the first, as it's more explicit. Other ideas?

I can send a PR.

---

This is an x/y problem. Why use a Code component directly?

I'd like to limit the vertical size of the code block (mainly, I just want the "copy" button to work; it's a big file).

To do this, I have to use a className referencing a CSS class with a height property.

• I can't use a style prop in the JSX, because the component does nothing with it.
• Wrapping the Code component in e.g. <div style={height: '250px'}> doesn't work; the code block overflows into the footer, etc.
• It's not possible to reference a class name imported from a .module.scss in the markdown params (whatever those are called) of a fenced code block, afaict.
• I could just shadow the Code component and bend it to my will, but figured someone else might have this use case.

[jnm2377]

Hi! Thanks for opening this issue. I think being able to add a custom className is a fair ask. I definitely think that the current workaround would be shadowing the component until we add this prop. Also, related to your issue: https://github.com/carbon-design-system/gatsby-theme-carbon/issues/463 The show more/less functionality might be useful for you in the future. As always, feel free to open a PR for this as well. :)