theowenyoung / gatsby-remark-default-html-attrs

Add default html attributes to markdown elements

gatsby-remark-default-html-attrs

Add attributes to html transformed by gatsby-transform-remark, with the help of unist-util-select.

Install

npm install gatsby-remark-default-html-attrs
yarn add gatsby-remark-default-html-attrs

Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve:`gatsby-remark-default-html-attrs`,
            options: {
              "h1": "h1",
              "h2": ["h2", "bold"],
              "heading[depth=3]": {
                className: "h3",
                style: "color: red;",
              },
              "p": {
                className: "paragraph",
              }
            }
          }
        ],
      },
    },
  ]
}

options

Accepts any valid unist-util-select's selectAll query (see list here)

markdown tokens

Please note that the plugin matches against markdown tokens (paragraph, list, code) and not html tags (p, ul, pre). Here's a list of common markdown tokens & how it'll be translated to html tags:

Token	Equivalent HTML Tag
blockquote	blockquote
break	br
code	pre
inlineCode	code
delete	s
emphasis	em
heading	h1...h6
image	img
link	a
list	ul
list[ordered]	ol
paragraph	p
strong	strong
table	table
thematic-break	hr

This plugin also provides a few shorthands:

Value	Equivalent
h1	heading[depth=1]
h2	heading[depth=2]
h3	heading[depth=3]
h4	heading[depth=4]
h5	heading[depth=5]
h6	heading[depth=6]
img	image
a	link
em	emphasis
s	delete

value

If value is a string or an array, it'll be used as class name.

  {
    'h1': 'hi',
    'h2': ['hi', 'hello'] 
  }
  // <h1 class="hi">...</h1>
  // <h2 class="hi hello">...</h2>

If value is an object, it should contains html attributes.

  {
    'p': {
      className: 'paragraph',
      style: 'color: red;',
    }
  }
  // <p class="paragraph" style="color:red;">...</p>