Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Using Shiki Highlighter Plugin for Gridsome

Using Shiki Highlighter for Gridsome

Published:

Reading Time: (approx) 2 min

Tags that this post has been filed under.

The main content about Using Shiki Highlighter Plugin for Gridsome

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.

Journal Index

Previous Article: Tip - Styling Broken Images

Next Article: My Coding Setup