Highlight your code in Gatsby

1 min read
2020-03-26

Different the basic and highlighted

Here is the basic HTML code block;

yarn upgrade-interactive

Here is the Highlighted style on Carbon;

yarn upgrade-interactive       

or Ubuntu yarn upgrade-interactive berkay@ubuntu:~          

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.

Plıugin 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

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.