Closed adrianthewriter closed 8 years ago
I'm having a hard time getting this to work too. Has anything changed?
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).
Sorry. Yes. I'll do that. Thanks!
does not work for me as well. Also on linked demo if you edit "warning" class result appear without transformation
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.
Adding CSS class is just a minimal default for simplicity, don't consider is as main feature. Key points are:
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>
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>
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
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)
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)
}
);
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>
?
Nesting should work the same way as with fenced blocks. Add more :::::::::::::::
for outer blocks
:::: test1
::: test2
test1 **test2** test3
:::
::::
Thanks @puzrin !
I'm using markdown-it v6.0.1 and I copied your "spoiler" example verbatim. It looks like this plugin no longer works.