DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Berkay
Berkay

Posted on • Originally published at raufsamestone.com on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Configure

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

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

πŸ‘‹ New to DEV?

Head over to our Welcome Thread and tell us a bit about yourself!