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