CosmicCode

Syntax highlighting in markdown

Created May 2nd, 2018

Last updated May 3rd, 2018

Markdown
Gatsby

We go into how to highlight syntax within markdown within Gatsby with PrismJS

To set up syntax highlighting in markdown pages in Gatsby add the prismjs plugin

npm install --save gatsby-transformer-remark gatsby-remark-prismjs

Then in your gatsby-config.js add the following to your plugins

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-prismjs`,
      ]
    }
  }
]

This enables PrismJS syntax highlighting in markdown pages. See PrismJS for more details including different themes

The syntax highlighting itself needs a stylesheet so add your preferred theme to layouts/index.tsx

import 'prismjs/themes/prism-solarizedlight.css'

Now when adding a codeblock in your markdown file (`) you just need to add a language descriptor after the triple backticks:

    ```javascript
    // In your gatsby-config.js
    plugins: [
      {
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [
            `gatsby-remark-prismjs`,
          ]
        }
      }
    ]
    ```

Now next time you run gatsby develop you should see syntax highlighting in your code block.

To see supported languages

To see theme examples

Andrew

Web development enthusiast with a keen interest in anything frontend.