Theme-ui: Unsupported Prism Languages

[chibicode]

@theme-ui/prism uses prism-react-renderer, which does not include all languages supported by Prism by default. So if you use one of the missing languages, it simply does not highlight:

# r language
# no syntax highlighting on theme-ui

A fix would be to pass Prism as a prop on Highlight component, as documented here. I think the best approach would be to allow passing Prism to index.js like this:

export default ({ children, className, title, Prism }) => {
  // ...

  return (
    <Highlight
      {...defaultProps} 
      Prism={Prism || defaultProps.Prism}
      ... />
  )
}

So that it could be customized like:

import CodeBlock from '@theme-ui/prism'
import Prism from 'prismjs/components/prism-core'
import 'prismjs/components/prism-r'

<CodeBlock Prism={Prism} ... />

[jletey]

@jxnblk @johno Just following up on this issue, should we maybe add to the documentation noting how since prism-react-renderer doesn't support all languages, we have added the ability to import custom language syntax highlighting? So that future users, when coming across this problem, can look at the documentation?

[johno]

It’s worth noting on the readme for sure 👍

[jletey]

Great ... I will open a PR!