Conflict with markdown-it-container

[cesasol]

When using this plugin with markdown-it container all the attrs for the elements inside get's merged with the attrs for the container unless there are more than one level of nested containers.

If I set attrs for a container, it get's inserted on the container attrs array as expected. (needs custom render function but that's a bug for the container plugin)

Example input:

::: column {.is-8}
Lorem ipsum
:::

Current output:

<div class="column is-8">
<p>Lorem ipsum</p>
</div>

But if I set attrs on the child, the attrs are set on the container:

::: column {.is-8}
# Some title here {.title}

Lorem ipsum
:::

It outputs:

<div class="column is-8 title">
<h1>Some title here</h1>
<p>Lorem ipsum</p>
</div>

Expected output:

<div class="column is-8">
<h1 class="title">Some title here</h1>
<p>Lorem ipsum</p>
</div>

When using nested containers it works as expected

:::: columns {.is-mobile}
::: column {.is-8}

# lorem ipsum {.title}

more lorem ipsum

:::
::::

outputs:

<div class="is-mobile columns">
<div class="is-8 column">
<h1 id="lorem-ipsum" class="title">lorem ipsum</h1>
<p>more lorem ipsum</p>
</div>
</div>

[arve0]

Hi, and thank you for reporting 👍 Which order do you configure the plugins? Attrs or containers first?

[cesasol]

Attributes first, but I tested inverting the order and the result is the same.

[mb21]

You can solve this by using custom renderers.

I wanted the containers to behave as closely as possible to pandoc fenced_divs, so for me this worked (adapted from markdown-it/markdown-it-container#23):

var md = require('markdown-it')()
       .use( require('markdown-it-attrs') )
       .use( require('markdown-it-container'), 'dynamic', {
            validate: function() { return true; },
            render: function(tokens, idx, options, env, slf) {
              var token     = tokens[idx]
                , className = token.info.trim()
                , renderedAttrs = slf.renderAttrs(token)
                ;
              if (token.nesting === 1) {
                return (className && className !== '{}')
                         ? '<div class="' + className + '">'
                         : '<div' + renderedAttrs + '>'
                         ;
              } else {
                return '</div>';
              }
            }
          })

One thing I couldn't make consistent: pandoc doesn't parse e.g. ::: class {key=val} as a div, because it has a class and and attribute block, whereas my code above does parse it as a div (ignoring the attribute block).

[arve0]

I've investigated this, and it seems to be an error in markdown-it-container, it does not correctly set the token nesting.

Example:

::: column
para
:::

gives the token stream

[
  Token {type: "container_column_open", tag: "div", attrs: null, map: Array(2), nesting: 1, …},
  Token {type: "paragraph_open", tag: "p", attrs: null, map: Array(2), nesting: 1, …}
  ...
]

Note that div and p both have nesting === 1, which is not correct, as p is inside div. I've opened an issue here: markdown-it/markdown-it-container#29

[StefanZander]

I am using both extensions markdown-it-attrs and markdown-it-container in conjunction with Marp in order to create my lecture slides.

When combining both extensions, e.g.,

::: definition
some def text...

Source: some source text {.source}
:::

the .source class will be propagated to the definition container (the parent div) rather than to the paragraph that represents the source text.

The problem as described in post #1 is still present to me.

I also tried the workaround proposed by @mb21 but it does not work in my setup.

Since I really like both extensions, I hope there is another way of making both work together.

Thanks in advance.