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-attrsyarn add gatsby-remark-default-html-attrs
Usage
// gatsby-config.jsmoduleexports = 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>