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:
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-prismjs`,
]
}
}
]
Note: probably you was using already gatsby-transformer-remark so, just swap this line for those.
Next, open gatsbybrowser.js_ and add:
require("prismjs/themes/prism-solarizedlight.css");
require("prismjs/plugins/line-numbers/prism-line-numbers.css");
To use in markdown, add three followed by language name as:
```javascript
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-prismjs`,
]
}
}
]```
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.