Highlight your code in Gatsby

Different the basic and highlighted code block:

Here is the basic HTML code block;

yarn upgrade-interactive

Here is the Highlighted style;

yarn upgrade-interactive

Plugin

With your markdown resolver used in Gatsby, you must integrate the plug-in.

For this we will need the plugin gatsby-remark-highlight code.

Plugin details on GitHub:https://github.com/deckgo/gatsby-remark-highlight-code

Install

yarn add gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code

Configure

//gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
          options: {
            terminal: 'ubuntu'
          }
        },
      ],
    },
  },
]

Usage

Add the following in the blog post template or main layout.js.

async componentDidMount() {
    try {
        const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
        await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
    } catch (err) {
        console.error(err);
    }
}

And then wrap your code blocks, on your Markdown file.