For inline elements?

[rstacruz]

Is it possible to add attrs to an inline element? eg:

[Contact us](/contact) {.btn}

[arve0]

Right now it skips inline elements: https://github.com/arve0/markdown-it-attrs/blob/master/index.js#L16:L18

[arve0]

Sorry, wrong lines. Do not have the data structure in my head.

What I think you mean is nested inline elements?

[rstacruz]

Sorry, should've been written things neater! I'd like to write:

<a href='/contact' class='button'>Contact us</a>

I can do this:

[Contact us](/contact){.button}

but this gets applied to the block element (p), not the inline (a):

<p class='button'>
  <a href='/contact'>Contact us</a>
</p>

[rstacruz]

(Maybe there can be a different syntax for inline elements, like {:.button} instead of {.button} or something)

[arve0]

It should be possible, with the same syntax, it's just not implemented.

[arve0]

So right now, just top elements are considered. If you are interested in implementing for nested inline elements, take a look at the tokens structure (click debug) here: https://markdown-it.github.io/

For example, this:

# header
paragraph with [link with **bold**{.bold}](http://link.org/){.link}
{.paragraph}

give this tokens:

[
  {
    "type": "heading_open",
    "tag": "h1",
    "attrs": null,
    "map": [
      0,
      1
    ],
    "nesting": 1,
    "level": 0,
    "children": null,
    "content": "",
    "markup": "#",
    "info": "",
    "meta": null,
    "block": true,
    "hidden": false
  },
  {
    "type": "inline",
    "tag": "",
    "attrs": null,
    "map": [
      0,
      1
    ],
    "nesting": 0,
    "level": 1,
    "children": [
      {
        "type": "text",
        "tag": "",
        "attrs": null,
        "map": null,
        "nesting": 0,
        "level": 0,
        "children": null,
        "content": "header",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      }
    ],
    "content": "header",
    "markup": "",
    "info": "",
    "meta": null,
    "block": true,
    "hidden": false
  },
  {
    "type": "heading_close",
    "tag": "h1",
    "attrs": null,
    "map": null,
    "nesting": -1,
    "level": 0,
    "children": null,
    "content": "",
    "markup": "#",
    "info": "",
    "meta": null,
    "block": true,
    "hidden": false
  },
  {
    "type": "paragraph_open",
    "tag": "p",
    "attrs": null,
    "map": [
      1,
      3
    ],
    "nesting": 1,
    "level": 0,
    "children": null,
    "content": "",
    "markup": "",
    "info": "",
    "meta": null,
    "block": true,
    "hidden": false
  },
  {
    "type": "inline",
    "tag": "",
    "attrs": null,
    "map": [
      1,
      3
    ],
    "nesting": 0,
    "level": 1,
    "children": [
      {
        "type": "text",
        "tag": "",
        "attrs": null,
        "map": null,
        "nesting": 0,
        "level": 0,
        "children": null,
        "content": "paragraph with ",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "link_open",
        "tag": "a",
        "attrs": [
          [
            "href",
            "http://link.org/"
          ]
        ],
        "map": null,
        "nesting": 1,
        "level": 0,
        "children": null,
        "content": "",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "text",
        "tag": "",
        "attrs": null,
        "map": null,
        "nesting": 0,
        "level": 1,
        "children": null,
        "content": "link with ",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "strong_open",
        "tag": "strong",
        "attrs": null,
        "map": null,
        "nesting": 1,
        "level": 1,
        "children": null,
        "content": "",
        "markup": "**",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "text",
        "tag": "",
        "attrs": null,
        "map": null,
        "nesting": 0,
        "level": 2,
        "children": null,
        "content": "bold",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "strong_close",
        "tag": "strong",
        "attrs": null,
        "map": null,
        "nesting": -1,
        "level": 1,
        "children": null,
        "content": "",
        "markup": "**",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "text",
        "tag": "",
        "attrs": null,
        "map": null,
        "nesting": 0,
        "level": 1,
        "children": null,
        "content": "{.bold}",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "link_close",
        "tag": "a",
        "attrs": null,
        "map": null,
        "nesting": -1,
        "level": 0,
        "children": null,
        "content": "",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "text",
        "tag": "",
        "attrs": null,
        "map": null,
        "nesting": 0,
        "level": 0,
        "children": null,
        "content": "{.link}",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "softbreak",
        "tag": "br",
        "attrs": null,
        "map": null,
        "nesting": 0,
        "level": 0,
        "children": null,
        "content": "",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      },
      {
        "type": "text",
        "tag": "",
        "attrs": null,
        "map": null,
        "nesting": 0,
        "level": 0,
        "children": null,
        "content": "{.paragraph}",
        "markup": "",
        "info": "",
        "meta": null,
        "block": false,
        "hidden": false
      }
    ],
    "content": "paragraph with [link with **bold**{.bold}](http://link.org/){.link}\n{.paragraph}",
    "markup": "",
    "info": "",
    "meta": null,
    "block": true,
    "hidden": false
  },
  {
    "type": "paragraph_close",
    "tag": "p",
    "attrs": null,
    "map": null,
    "nesting": -1,
    "level": 0,
    "children": null,
    "content": "",
    "markup": "",
    "info": "",
    "meta": null,
    "block": true,
    "hidden": false
  }
]

[arve0]

I've added support for inline elements. I've also added a link to your implementation in the README.