v2: how to add languages for syntax highlighting

[olivoil]

Question

I need to add syntax highlighting for a language not included by default in prism-react-renderer. The language in question is supported by prismjs.

I saw react-prism-renderer accepts a Prism prop to the Highlight component, but I'm not sure how to do it from docz.

How would you recommend doing it?

[rakannimer]

Hey @olivoil

Setting custom languages is not yet supported out of the box, but it's easy to add by passing a language prop to LiveProvider through the docz Playground component here.

It's a very reasonable feature request so I'll add support for it later today and ping you here when it's published !

Cheers

[rakannimer]

Hey @olivoil

I added support to set a custom language in the Playground component, you can now pass a prop (language) to the Playground component to set the language but I'm not sure that's what you're looking for.

I'm afraid if the language you want to use is not in this list : https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js

then you won't be able to get syntax highlighting out of the box.

What you can do is to bypass docz and create a component that reads your code as a string and displays it with the correct syntax highlighting :

In your JSX :

const CodeDisplay = (children) =>  {
	// use an alternative to React Live to get syntax highlighting like https://www.npmjs.com/package/react-syntax-highlighter
	return <pre>{children}</pre>
}

In your MDX :

import { Playground } from 'props'
import CodeDisplay from 'path/to/CodeDisplay'
<Playground>
<CodeDisplay language="my-language">
{`
print("hello world")
print("hello again")
`}
</CodeDisplay>
</Playground>

[olivoil]

Thanks, I'll give it a try!

Do you think there could be an easier way to add syntax highlighting for languages not in includeLangs.js? Something that would work not only for the Playground component, but also with the built-in code block syntax (```) ?

There's an open issue that prevents rendering any code blocks with empty lines when passing them as a multi-line string. It doesn't seem to have that problem with the built-in code blocks in docz.

So at the moment, this will fail:

import { Playground } from 'props'
import CodeDisplay from 'path/to/CodeDisplay'

<Playground>
<CodeDisplay language="my-language">
{`
public class Whatever() {
    // The blank line below will cause parsing to fail.

}
`}
</CodeDisplay>
</Playground>

But this works if the language is in includeLangs, and probably would work if there was a way to add the language to the ones included in includeLangs:

   ```myLanguage
   public class Whatever() {
        // It renders the blank line successfully

    }
    ```

[olivoil]

The workaround I found at the moment is to do this:

import { default as Prism } from 'prism-react-renderer/prism'
(typeof global !== 'undefined' ? global : window).Prism = Prism;
require('prismjs/components/prism-myLanguage');

[pavanpodila]

Does this work for syntax highlighting in fenced code blocks ? Is there a simpler approach to add language support for other languages, simply for rendering using Prism ?

[rakannimer]

I stumbled upon another version to do this using gatsby-remark-vscode.

Please check out this example of using it with docz : https://github.com/doczjs/docz/tree/master/examples/with-gatsby-remark-vscode

Read more about everything you can do with gatsby-remark-vscode here : https://github.com/andrewbranch/gatsby-remark-vscode

And about supported languages and adding more languages here : https://github.com/andrewbranch/gatsby-remark-vscode#languages

It should give you much more power and flexibility than the default Prism.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.