gridsome-plugin-remark-shiki

Syntax highlighter for markdown code blocks using shiki

Install

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

Usage

Add syntax highlighter to a single markdown source using the given options:

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        route: '/blog/:year/:month/:day/:slug',
        remark: {
          plugins: [
            [ 'gridsome-plugin-remark-shiki', { theme: 'nord', skipInline: false } ]
          ]
        }
      }
    }
  ]
}

Add syntax highlighter to all markdown sources, but skip inline code:

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {}
    }
  ],
 
  transformers: {
    remark: {
      plugins: [
        [ 'gridsome-plugin-remark-shiki', { theme: 'nord', skipInline: true } ]
      ]
    }
  }
}

Use custom themes with the syntax highlighter:

const shiki = require('shiki')
 
const customTheme = shiki.loadTheme('./static/custom-theme.json')
 
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'Post',
        remark: {
          plugins: [
            [ 'gridsome-plugin-remark-shiki', { theme: customTheme, skipInline: true } ]
          ]
        }
      }
    }
  ]
}

Use with @gridsome/vue-remark:

module.exports = {
  plugins: [
    {
      use: '@gridsome/vue-remark',
      options: {
        typeName: 'BlogPost',
        baseDir: './blog/posts',
        template: './src/templates/BlogPost.vue',
        plugins: [
          [
            'gridsome-plugin-remark-shiki',
            { theme: 'nord', skipInline: true },
          ],
        ],
      },
    },
  ],
};