Hola, I'm Alberto Fortes,

Front-end senior developer from 2006, UX/UI Engineer, working in remote, globally with companies, startups and agencies.

Home · Articles

Code block highlights for Gatsby ReactJS blogs

Syntax highlighting to the code blocks

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

Run the next command:

npm install --save gatsby-remark-prismjs prismjs

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

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      `gatsby-remark-prismjs`,
    ]
  }
}

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.