Add code snippets using Gridsome Prism.js plugin

Code snippets are a key part of writing for any developer. In this post, I am going to walk you through a simple way to add code snippets to your posts.

Install plugin

install the prism.js plugin by running the command below in your terminal.

npm i gridsome-plugin-remark-prismjs-all

Add plugin in gridsome.config.js

// In your gridsome.config.js
transformers: {
    //Add markdown support to all file-system sources
    remark: { 
      externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
      anchorClassName: 'icon icon-link',
      plugins: [
        'gridsome-plugin-remark-prismjs-all',
      ]
    }
  }

You could set custom class names which you can use for styling as shown below

// In your gridsome.config.js
transformers: {
        plugins: [
            [
                "gridsome-plugin-remark-prismjs-all",
                {
                showLineNumber: true,
                highlightClassName: "gridsome-highlight",
                codeTitleClassName: "gridsome-code-title",
                classPrefix: "language-",
                },
            ]
        ]
    }

Add a theme in your main.js

There are 3 different themes presently available, you can import anyone as shown below

require("gridsome-plugin-remark-prismjs-all/themes/night-owl.css");

require("gridsome-plugin-remark-prismjs-all/themes/solarized.css");

require("gridsome-plugin-remark-prismjs-all/themes/tomorrow.css");

Add Code Snippet to file

Wrap your code in triple backquotes then specifying the code language. Check out some examples and their resulting renders below.

Example 1

```js
  let number = 4;
  console.log(number);
```

 

Render

let number = 4;
console.log(number);

Example 2

```css
  body {
    min-height: 100vh;
    background-color: transparent;
    line-height: 1.5;
  }
```

 

Render

body {
    min-height: 100vh;
    background-color: transparent;
    line-height: 1.5;
}

Read other articles