CuteMachine

Syntax Highlighting For Gatsby

For a long time, I have been using the gatsby-remark-prismjs plugin for syntax highlighting the code examples on CuteMachine.

Today I replaced the plugin with gatsby-remark-vscode.

Why gatsby-remark-vscode?

There was no necessity to change the plugin; Prism worked very well for me. But I stumbled upon the plugin, and because I use Visual Studio Code when writing code and articles, I thought it would be nice to use the same theme in my development environment and my code examples.

Another advantage of using the vscode plugin is that it does not have to make any compromises. Because Prism works on every website, it needs to be lightning-fast and, therefore, cannot support every code statement. When used with Gatsby, this does not make sense as code highlighting happens during build time and not while rendering the website in the browser. Therefore the vscode plugin gives much better results when coloring tricky template strings or complex TypeScript code examples.

Replacing Prismjs with Gatsby

First, remove any Prism related code you might have like the plugin itself and any theme CSS files.

After this, add the new plugin.

npm install --save gatsby-remark-vscode

Then you need to add the following config to your Gatsby config in gatsby-config.js.

{
    resolve: `gatsby-remark-vscode`,
    options: {
        theme: 'Solarized Light',
        inlineCode: {
            marker: '•',
        },
    },
},

Did you notice the marker? Use this marker to set the language in inline code examples. You will find a short example below.

If you are using Mdx instead of Remark to render your Markdown files then you need to place the config inside the options of gatsby-plugin-mdx like so:

{
    resolve: 'gatsby-plugin-mdx',
    options: {
    extensions: ['.mdx', '.md'],
    gatsbyRemarkPlugins: [
        {
            resolve: 'gatsby-remark-images',
            options: {
                maxWidth: 690,
            },
        },
        {
            resolve: 'gatsby-remark-responsive-iframe',
        },
        {
            resolve: `gatsby-remark-vscode`,
            options: {
                theme: 'Solarized Dark',
                inlineCode: {
                marker: '•',
                },
            },
        },
        'gatsby-remark-copy-linked-files',
        'gatsby-remark-autolink-headers',
        'gatsby-remark-external-links',
    ],
    },
},

Do you notice the highlighted lines in the gatsby-plugin-mdx config above? If you want similar highlights in your example, you need to add the following CSS to your post-template.css (or top-level CSS) file.

:root {
  --grvsc-line-highlighted-background-color: rgba(255, 255, 255, 0.1);
  --grvsc-line-highlighted-border-color: rgba(255, 255, 255, 0.2);
  --grvsc-line-highlighted-border-width: 0.5rem;
}

Using code highlighting

When you used Prism before, you should not have to touch your existing code examples as it works precisely the same way. Just put your code example in the three backticks blocks as before and tell the plugin the language of your code example. See the highlighted lines.

   ```js
   // This is JavaScript example code
   const foo = 42;
   ```

If you want to highlight certain code lines like I did in my examples above, you can tell the plugin the highlighted lines in curly braces after the language. For example:

   ```js{2, 4-6}
   // Line one
   // Line two
   // Line three
   // Line four
   // Line five
   // Line six
   // Line seven
   ```

Will render with the highlighted lines, like so:

// Line one
// Line two
// Line three
// Line four
// Line five
// Line six
// Line seven

If you want to display an inline code example (e.g. const foo = 42;), you can do so with the inline notation marker we configured above.

`js•const foo = 42;`

Posted on CuteMachine.

Jo's Profile ImageWritten by Jo who lives and works in Frankfurt building digital doodah. Stalk him on Twitter.

TOS • Privacy • Disclaimer