UI engineer | front-end React developer

JavaScript, markdown, Gatsby,

Code block highlights for Gatsby ReactJS blogs


Code block highlights for Gatsby ReactJS blogs

Syntax highlighting to the code blocks

If you are using Gatsby as static website or blog, probably you are a developer. In that case, you will need code syntax highlighting to the code blocks. As usual Gatsby provide us an easy way to achieve it into the markdown.

Run the next command:

npm install --save gatsby-remark-prismjs prismjs

Once installed, open your gatsby-config.js file and add:

1plugins: [ 2 { 3 resolve: `gatsby-transformer-remark`, 4 options: { 5 plugins: [ 6 `gatsby-remark-prismjs`, 7 ] 8 } 9 } 10]

Note: probably you was using already gatsby-transformer-remark so, just swap this line for those.

Next, open gatsbybrowser.js_ and add:

1require("prismjs/themes/prism-solarizedlight.css"); 2require("prismjs/plugins/line-numbers/prism-line-numbers.css");

To use in markdown, add three followed by language name as:

1```javascript 2plugins: [ 3 { 4 resolve: `gatsby-transformer-remark`, 5 options: { 6 plugins: [ 7 `gatsby-remark-prismjs`, 8 ] 9 } 10 } 11]```

That's all! Remember markdown syntax: add a <pre> tag is done by adding four empty spaces.

And, of course, check official plugin documentation here.