Nauseating Packaged Meat

    @theowenyoung/gatsby-remark-default-html-attrs

    1.0.0 • Public • Published

    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>

    Install

    npm i @theowenyoung/gatsby-remark-default-html-attrs

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    4.38 kB

    Total Files

    3

    Last publish

    Collaborators

    • theowenyoung