Using Shiki Highlighter Plugin for Gridsome

Author: Will Moody

Published: Oct 1, 2020

Reading Time: (approx) 2 min

Tags that this post has been filed under.

Using the Shiki Highlighter

To use the Shiki highlighter with Gridsome we need to install the gridsome-plugin-remark-shiki plugin first.

To install the plugin use either yarn or NPM, my personal choice is yarn.

yarn add gridsome-plugin-remark-shiki
npm install gridsome-plugin-remark-shiki

Then add something like this to your gridsome-config.js

  transformers: {
    remark: {
      plugins: [
        [ 'gridsome-plugin-remark-shiki', { theme: 'material-theme-default', skipInline: true } ]
      ]
    }

Once installed you should see your code highlighted as below.

We are using the theme 'material-theme-default' for theses examples.

This is a html code block

<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    ${head}
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body id="top" role="application" ${bodyAttrs}>
    ${app}
    ${scripts}
  </body>
</html>

This is a json code block

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

This is a yml code block

---
label: Pages
hide_body: false
fields:
- name: page_title
  type: text
  config:
    required: true
  label: Page Title
  description: This is the main page title
- name: page_content
  type: textarea
  default: ''
  config:
    required: true
    wysiwyg: true
    schema:
      format: markdown
  label: Page Content
  description: This is the main content section for the page
- name: id
  type: text
  config:
    required: false
  label: ID
  description: page ID

This is a css code block

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;

  *,
  *:after,
  *:before {
    box-sizing: inherit;
  }
}

html {
  overflow: scroll;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

This is a js code block

const path = require('path')

function addStyleResource(rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        // scss
        path.resolve(__dirname, './src/assets/sass/*.scss'),
      ],
    })
}

This is a very simple method of adding some nice styling to your code in posts.

Don't forget to restart your server if you make any changes to the gridsome.config.js file.