Skip to main content
View plugin on GitHub
See starters using this

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

key

Accepts any valid unist-util-select’s selectAll query (see list here), but also accept 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>

Docs
Tutorials
Plugins
Blog
Showcase