Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@gridsome/transformer-remark

0.6.1 • Public • Published

@gridsome/transformer-remark

Markdown transformer for Gridsome with Remark.

Install

  • yarn add @gridsome/transformer-remark
  • npm 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 guillements (<<, >>) 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
  • commonmark

    • Type: boolean
    • Default: false
  • footnotes

    • Type: boolean
    • Default: false
  • pedantic

    • Type: boolean
    • Default: false
  • blocks

{
  remark: {
    plugins: [
      //...
    ],
    config: {
      footnotes: true
    }
  }
}

Install

npm i @gridsome/transformer-remark

DownloadsWeekly Downloads

2,999

Version

0.6.1

License

none

Unpacked Size

25.1 kB

Total Files

10

Last publish

Collaborators

  • avatar