Options object for custom types

Currently, it’s impossible to apply attributes to types that are not hardcoded. I tried to implement my self this feature but i think it needs a bit of re-do and i don’t fully understand what this plugin does internally 😦

My idea is, pass an option object, like this:

md.use(MarkdownItAttrs, {
  sample: 'block', // "sample" type, which is a block
  abbr: 'inline', // "abbr" type, which is inline
})

This way, we can have inside curlyAttrs() something like this:

if (opts) {
  if (opts[tokens[i].type] && hasCurly(tokens[i].info)) {
    // At this point, the token is custom and the type also contains attributes
    // Here we also know if its inline or block, by just checking opts[tokens[i].type]
  }
}

But here i don’t even know how to continue. Hardcoding the code (copying code from fence block you added lately) will work, but only for block elements and it’s not much flexible.

My idea is, re-factoring this into 2 functions, parseAsInline and parseAsBlock. This two functions will accept the type, and simply return the element with the attributes added correctly. This way you can simply do:

if (opts) {
  if (opts[tokens[i].type] && hasCurly(tokens[i].info)) {
    if (opts[tokens[i].type] === 'block') return parseAsBlock(tokens[i], tokens[i].info)
    return parseAsInline(tokens[i], tokens[i].info)
  }
}

This of course can be also done with 1 simple function like parseElement(type, element, attrs)

parseElement(opts[tokens[i].type], tokens[i], tokens[i].info)

This will make this plug-in fully compatible with other plug-ins that create custom types. I currently have https://github.com/felixsanz/markdown-it-samp, which creates a <pre><samp> element (similar to fenced but samp instead of code).

What do you think of this? I’m sorry that i could not provide a pull request with this implemented, i’m still learning the internals of markdown-it and my implementation will have a lot of bugs…

Thanks

[arve0]

You are correct, if considering the current code/state of markdown-it-attrs. But it’s not impossible. Just needs to find a common ground where to find the {}-curlies. If they are found with a new line at the end: \n{.red}, apply to block, else apply attributes to first inline element. Renderer should take attributes from first inline element and render those to code.

[felixsanz]

Example custom token:

Token {
  type: 'sample',
  tag: 'samp',
  attrs: null,
  map: [ 28, 33 ],
  nesting: 0,
  level: 0,
  children: null,
  content: 'test\n',
  markup: '´´´',
  info: ' {.foo}',
  meta: null,
  block: true,
  hidden: false }

This should add class="foo" to <samp>