this doesn't appear to work anymore.

[adrianthewriter]

I'm using markdown-it v6.0.1 and I copied your "spoiler" example verbatim. It looks like this plugin no longer works.

[puzrin]

This plugin works and exists in demo. Example

[julianomoreira]

I'm having a hard time getting this to work too. Has anything changed?

[puzrin]

If you have a problem, the best way to ask for help is to create test repo with demo. It's impossible to help with reports "everything broken, plugin sucks" :). Such issues are closed as not useful (with the factthat you can see this plugin working in markdown-it demo).

[julianomoreira]

Sorry. Yes. I'll do that. Thanks!

[sidorares]

does not work for me as well. Also on linked demo if you edit "warning" class result appear without transformation

[puzrin]

Hi @sidorares :)

does not work for me as well.

Need code example.

Also on linked demo if you edit "warning" class result appear without transformation

That's intended. ::: defines a possible wrapper of unknown type, and each type is defined with name. Something like fenced code block with language name.

If no appropriate wrapper type found (by name) - we don't know how to present it, and do nothing. You can change is, if you wish, by providing your own validator. You can even force it to look as fenced block, but do something special when "reserved" name used.

[puzrin]

Adding CSS class is just a minimal default for simplicity, don't consider is as main feature. Key points are:

• check if we need to wrap at all (by opening tag + following header)
• if yes, then render nested content & wrap it with something custom.

[sidorares]

var md = require('markdown-it')({})
 .use(require('markdown-it-container'));

console.log(md.render(`
::: class-name
  test1 **test2** test3
:::
`));

Output:

<p>::: class-name
test1 <strong>test2</strong> test3
:::</p>

[sidorares]

If no renderer defined,

with container name class will be created:

Based on readme I'd expect to see something like

<p><div class="class-name">
test1 <strong>test2</strong> test3
</div></p>

[puzrin]

https://github.com/markdown-it/markdown-it-container#api

You've missed plugin params, name it's mandatory (that's like namespace for multiple .use() of this plugin, see src).

By default name is required in markup, but you can override validator https://github.com/markdown-it/markdown-it-container/blob/2.0.0/index.js#L8-L10

[sidorares]

What does it mean and why it's mandatory?

var md = require('markdown-it')({})
 .use(require('markdown-it-container')({ name: 'foobar'}));

console.log(md.render(`
::: class-name
  test1 **test2** test3
:::
`));

now fails with TypeError: Cannot read property 'ruler' of undefined at container_plugin (./node_modules/markdown-it-container/index.js:138:11)

[puzrin]

https://github.com/markdown-it/markdown-it-container#example

var md = require('markdown-it')()
  .use(
    require('markdown-it-container'), // plugin
    'foobar', // plugin param1, mandatory
    { // plugin param2
      validate: name => name.trim().length // allow everything not empty (by i don't recommend)
    }
  );

[sidorares]

This is something I expected as default behaviour:

var md = require('markdown-it')({})
 .use(require('markdown-it-container'), 'classname', {
  validate: name => name.trim().length,
  render: (tokens, idx) => {
    if (tokens[idx].nesting === 1) {
      return `<div class="${tokens[idx].info.trim()}">\n`;
    } else  {
      return '</div>\n';
    }
  }
});

console.log(md.render(`
::: test1
test1 **test2** test3
:::
`));

<div class="test1">
<p>test1 <strong>test2</strong> test3</p>
</div>

Also I could not get nested containers to work, nesting is either 1 or -1. How do I make this

::: test1
::: test2
test1 **test2** test3
:::
:::

transform into

<div class="test1">
<div class="test2">
<p>test1 <strong>test2</strong> test3</p>
</div>
</div>

?

[puzrin]

Nesting should work the same way as with fenced blocks. Add more ::::::::::::::: for outer blocks

:::: test1
::: test2
test1 **test2** test3
:::
::::

[sidorares]

Thanks @puzrin !