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);
}
}