gridsome@gridsome/transformer-remark
Markdown transformer for Gridsome with Remark.
Install
yarn add @gridsome/transformer-remarknpm install @gridsome/transformer-remark
Basic usage
The transformer is automatically used if installed in your project. Custom transformer options can either be set for each source plugin or globally.
//gridsome.config.js
module.exports = {
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
path: 'blog/**/*.md',
typeName: 'Post',
remark: {
// remark options
}
}
}
],
transformers: {
remark: {
// global remark options
}
}
}
Add additional plugins
By default this plugin comes with remark-slug, remark-autolink-headings, remark-external-links, remark-squeeze-paragraphs and remark-fix-guillemets included. Add any additional Remark plugin with a plugins option. Included plugins can also be disabled if needed. See more info below.
The following example adds the remark-attr plugin globally if it is installed in your project.
{
remark: {
plugins: [
'remark-attr'
]
}
}
Options
plugins
- Type:
Array - Default:
[]
Add additional Remark plugins.
{
remark: {
plugins: [
// add plugin without options
'remark-plugin',
// require plugin manually
require('remark-plugin'),
// add plugin with options
['remark-plugin', { /* plugin options */ }]
]
}
}
useBuiltIns
- Type:
boolean - Default:
true
Set this option to false to disable all built-in plugins.
grayMatter
- Type:
object - Default:
{}
Options to pass through to gray-matter for parsing front matter.
squeezeParagraphs
- Type:
boolean - Default:
true
Remove empty (or white-space only) paragraphs.
externalLinks
- Type:
boolean - Default:
true
Add target and rel attributes to external links.
externalLinksTarget
- Type:
string - Default:
'_blank'
externalLinksRel
- Type:
Array | string - Default:
['nofollow', 'noopener', 'noreferrer']
slug
- Type:
boolean - Default:
true
Add anchors to heading.
autolinkHeadings
- Type:
boolean - Default:
true
Automatically add links to headings. Disabled if slug is false.
autolinkClassName
- Type:
string - Default:
'icon icon-link'
fixGuillemets
- Type:
boolean - Default:
true
Support ASCII guillemets (<<, >>) and mapping them to HTML.
imageQuality
- Type:
number - Default:
75
imageBlurRatio
- Type:
number - Default:
40
imageBackground
- Type:
string
lazyLoadImages
- Type:
boolean - Default:
true
config
- Type:
Object - Default:
{}
Add additional Remark options.
This allows you to enable/disable gfm, commonmark, footnotes, pedantic and blocks.
gfm
- Type:
boolean - Default:
true
- Type:
commonmark
- Type:
boolean - Default:
false
- Type:
footnotes
- Type:
boolean - Default:
false
- Type:
pedantic
- Type:
boolean - Default:
false
- Type:
blocks
- Type:
Array | string - Default: list of block HTML elements
- Type:
{
remark: {
plugins: [
//...
],
config: {
footnotes: true
}
}
}