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


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


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


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


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>