@theowenyoung/gatsby-remark-default-html-attrs v1.0.0

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:

This plugin also provides a few shorthands:

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>