Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 21, 2020 09:24 am GMT

Add code snippets using Gridsome Prism.js plugin

Code snippet

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
Enter fullscreen mode Exit fullscreen mode

Add plugin in gridsome.config.js

// In your gridsome.config.jstransformers: {    //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',      ]    }  }
Enter fullscreen mode Exit fullscreen mode

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

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

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");
Enter fullscreen mode Exit fullscreen mode 
require("gridsome-plugin-remark-prismjs-all/themes/solarized.css");
Enter fullscreen mode Exit fullscreen mode 
require("gridsome-plugin-remark-prismjs-all/themes/tomorrow.css");
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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;}
Enter fullscreen mode Exit fullscreen mode

Read other articles


Original Link: https://dev.to/lindaojo/add-code-snippets-using-gridsome-prism-js-plugin-2njk

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To