Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Using Shiki Highlighter Plugin for Gridsome

Using Shiki Highlighter Plugin for Gridsome

Author: Will Moody


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}>
    <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">
  <body id="top" role="application" ${bodyAttrs}>

This is a json code block

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

This is a yml code block

label: Pages
hide_body: false
- name: page_title
  type: text
    required: true
  label: Page Title
  description: This is the main page title
- name: page_content
  type: textarea
  default: ''
    required: true
    wysiwyg: true
      format: markdown
  label: Page Content
  description: This is the main content section for the page
- name: id
  type: text
    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;

  *: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) {
      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.

Previous Article: Tip - Styling Broken Images

Next Article: My Coding Setup