Syntax highlighter for markdown code blocks
> Syntax highlighter for markdown code blocks
yarn add @gridsome/remark-prismjsnpm install @gridsome/remark-prismjsIn your main.js file, import a Prism CSS theme:
``js
import 'prismjs/themes/prism.css'
export default function (Vue) {
// ...
}
`
In gridsome.config.js, add syntax highlighter to a single markdown source:
`js`
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:
`js
module.exports = {
plugins: [
{
use: '@gridsome/source-filesystem',
options: {}
}
],
transformers: {
remark: {
plugins: [
'@gridsome/remark-prismjs'
]
}
}
}
`
#### customClassPrefix
- Type: String''
- Default:
If Prism's default classes are too generic and cause conflicts, you can add a prefix like "prism--" to all PrismcustomClassPrefix
classes by passing it in as the .
#### transformInlineCode
- Type: Booleanfalse
- Default:
If you'd like to disable highlighting of inline code blocks, pass transformInlineCode: false in the plugin options
#### showLineNumbers
- Type: Booleanfalse
- Default:
If you'd like to add line numbers alongside the code. You can pass showLineNumbers: true in the plugin options and import a Prism CSS about line numbers to main.js file. like this:
`js
import 'prismjs/themes/prism.css'
// Prism default CSS about line numbers
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
export default function (Vue) {
// ...
}
`
If you wish to only show line numbers on certain code blocks, you can leave false and use the { lineNumbers: true }` syntax below