Highlight your code in Gatsby

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.