Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@gridsome/remark-prismjs

0.3.0 • Public • Published

@gridsome/remark-prismjs

Syntax highlighter for markdown code blocks

Install

  • yarn add @gridsome/remark-prismjs
  • npm install @gridsome/remark-prismjs

Usage

In your main.js file, import a Prism CSS theme:

import 'prismjs/themes/prism.css'
 
export default function (Vue) {
  // ...
}

In gridsome.config.js, add syntax highlighter to a single markdown source:

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

Or add syntax highlighter to all markdown sources:

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {}
    }
  ],
 
  transformers: {
    remark: {
      plugins: [
        '@gridsome/remark-prismjs'
      ]
    }
  }
}

If you'd like to disable highlighting of inline code blocks, pass transformInlineCode: false in the plugin options

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {}
    }
  ],
 
  transformers: {
    remark: {
      plugins: [
        ['@gridsome/remark-prismjs', { transformInlineCode: false }]
      ]
    }
  }
}

Install

npm i @gridsome/remark-prismjs

DownloadsWeekly Downloads

863

Version

0.3.0

License

none

Unpacked Size

7.78 kB

Total Files

5

Last publish

Collaborators

  • avatar