Gatsby - Code syntax highlighting with react-prism-renderer

I write coding tutorials for different programming languages.

Since I use Gatsby, for syntax highlighting I added react-prism-renderer, which is a wonderful plugin to do it. By default, it comes with a variety of coding languages enabled. This is the component that I use to display my code examples in this page.

But when I was writing some snippets, I saw that some languages weren’t highlighted by default. There was a lack of syntax color. What was the problem?

🧱 My syntax highlight component

Under the hood, React prism renderer uses PrismJS, and we can use it as our advantage. We need to import language by language that we need to add support for it.

Here is the code. With this snippet, we can create a Gatsby React’s component. Pay attention to the require lines.

1
import React, { useContext } from 'react';
2
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
3
// Loading some themes for Prism
4
import nightOwlNight from 'prism-react-renderer/themes/nightOwlLight';
5
import nightOwl from 'prism-react-renderer/themes/nightOwl';
6
import Prism from 'prism-react-renderer/prism';
7
// A personal file with a light / dark theme for my blog. You remove this and their references
8
import { ThemeContext } from '../Layout';
9

10
// Here we import the languages that we need
11
require('prismjs/components/prism-php');
12
require('prismjs/components/prism-ruby');
13
require('prismjs/components/prism-yaml');
14
require('prismjs/components/prism-docker');
15
require('prismjs/components/prism-bash');
16
require('prismjs/components/prism-ignore');
17

18
interface Props {
19
  children?: string;
20
  className: string;
21
}
22

23
const Code = ({ children, className }: Props): JSX.Element => {
24
  const context = useContext(ThemeContext);
25
  const language = (className.replace(/language-/, '') || '') as Language;
26

27
  return (
28
    <Highlight
29
      {...defaultProps}
30
      theme={context.isLightTheme ? nightOwlNight : nightOwl}
31
      code={children}
32
      language={language}
33
    >
34
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
35
        <pre className={`${className} overflow-x-auto`} data-testid="code-highlight" style={{ ...style }}>
36
          {tokens.map((line, index) => {
37
            const lineProps = getLineProps({ line, key: index });
38
            return (
39
              <div key={index} {...lineProps}>
40
                {line.map((token, key) => (
41
                  <span key={key} {...getTokenProps({ token, key })} />
42
                ))}
43
              </div>
44
            );
45
          })}
46
        </pre>
47
      )}
48
    </Highlight>
49
  );
50
};
51

52
export default Code;

Then, if you’re using MDX or something similar to create your pages. You can use the component as you can see here

1
import { MDXProvider } from '@mdx-js/react';
2
import { MDXRenderer } from 'gatsby-plugin-mdx';
3
import Code from '../components/Mdx/Code'; // The component created before
4

5
const MyCode = (props: { children: string; className: string }) => <Code {...props} />;
6

7
<MDXProvider components={{ code: MyCode }}>
8
  <MDXRenderer>{mdx.body}</MDXRenderer>
9
</MDXProvider>;

Now all your HTML <code> tags will have syntax highlight.

🎙 Explaining the code

The <Highlight/> component is used by react prism renderer to create the code syntax color that you can see.

If we see the import part of the coding languages, we will see that we need to load some of them. This is made to just only load what you need. I’d recommend you to visit the /node_modules/prismjs/components/ folder.

1
// Here we import the languages that we need
2
require('prismjs/components/prism-php');
3
require('prismjs/components/prism-ruby');
4
require('prismjs/components/prism-yaml');
5
require('prismjs/components/prism-docker');
6
require('prismjs/components/prism-bash');
7
require('prismjs/components/prism-ignore');

Source from fixing language highlighting: here . This tutorial is an extension from the original answer.

The code from the component could be outdated. Always take a look to my main Code component here

Corrections? Suggestions? Click here to edit this page on Github

My posts are not AI generated, they might be only AI corrected. The first draft is always my creation

In other languages

Gatsby: colorizar código usando react-prism-renderer

Gatsby: Colorier la syntaxe avec react-prism-renderer

Author

Written by Helmer Davila