sammndhr/gridsome-plugin-remark-shiki

Syntax highlighter for markdown code blocks using shiki

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:

{
  // Can be any of
  // https://github.com/octref/shiki/tree/master/packages/themes
  // and will default to 'nord'
  theme: 'nord',
  
  // Set to `true` to skip highlighting inline `code` elements.
  skipInline: false
}

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' } ]
          ]
        }
      }
    }
  ]
}

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 } ]
      ]
    }
  }
}