Support markdown-it-containers

[vimtaai]

Hi, It would be nice to have support for markdown-it containers via the https://github.com/markdown-it/markdown-it-container plugin. Any chance that you add support for this?

[yzane]

For what purpose would you use this?

[vimtaai]

I use markdown-pdf with my own project mdss (https://github.com/vimtaai/mdss). It allows me to use container blocks to do things like centering text or floating images or create colored boxes.

[yzane]

Is it OK with the following specifications?

::: class warning
*here be dragons*
:::

<div class="warning">
<p><em>here be dragons</em></p>
</div>

and

::: class warning error
*here be dragons*
:::

<div class="warning error">
<p><em>here be dragons</em></p>
</div>

I support markdown-it-container. Please download from here and try it.

[vimtaai]

I think the original plugin doesn't require adding the "class" keyword to containers.

::: warning
*here be dragons*
:::

<div class="warning">
<p><em>here be dragons</em></p>
</div>

But it is also looks good as it is.

[yzane]

@vimtaai Perhaps you would like to set an arbitrary value for the class name.

.use(require('markdown-it-container'), name [, options]);

However, I think that it is necessary to hard code the name parameter.

So I fixed the value of the name parameter to class. And I implemented the following characters as arbitrary class names.

::: class warning
*here be dragons*
:::

If possible, I would like to make it the same as the original specification, but is there any good way to do it?

[vimtaai]

@yzane In an other project of mine I use the following config:

.use(markdownItContainer, '', {
    validate(name) {
      return name.trim().length;
    },
    render(tokens, idx) {
      if (tokens[idx].info.trim() !== '') {
        return `<div class="${tokens[idx].info.trim()}">`;
      } else {
        return `</div>`;
      }
    }
  });

This usage corresponds to the way to how pandoc's container blocks work.

[yzane]

@vimtaai Thank you very much. I got the desired behavior with the above code.

[yzane]

@vimtaai Please upgrade to Markdown PDF ver1.2.0 and try it

[vimtaai]

Hi, I started to use this config in my own project:

{
  validate: () => true,
  render: function (tokens, idx) {
    if (tokens[idx].type === 'container__open') {
      const classList = tokens[idx].info.trim()
      return `<div ${classList ? `class="${classList}"` : ``}>`
    } else {
      return `</div>`
    }
  }
}

It allows empty <div>-s by omitting the class and I think it's easier to read as well.

[antoinne85]

I'm really happy with this extension so far.

Would you perhaps consider adding a mechanism to allow us to customize the rendering for the markdown-it-container?

As a rough idea, perhaps a settings that allows us to point to a .js file that will be used to configure markdown-it-container?

In my case, I'd like to emit some custom HTML when I use ::: warning that isn't readily possible using just CSS for .warning alone.

[jmaneyrol69]

Hi, I'm really struggling using this extension since none of the it-containers I use render when I convert to .pdf.

For exemple,

::: warning
Some warning
:::

renders:

Some warning

With no style at all. What am I doing wrong?

[liujiajun]

Hi, I'm really struggling using this extension since none of the it-containers I use render when I convert to .pdf.

For exemple,

::: warning
Some warning
:::

renders:

Some warning

With no style at all. What am I doing wrong?

I'm having this problem as well

[DrWala]

Hello @yzane, do you have any ideas on the above? I'm facing it too.