albertofortes

UI engineer | front-end React developer

JavaScript, markdown, Gatsby,

Code block highlights for Gatsby ReactJS blogs

2019-05-08

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.