markdown-it-attrs and container

[xu4wang]

I'm trying to add some style to the container. As below demo shows, markdown-it-attrs cannot pass css class to markdown container.

Is there a way to use a generic container, similar to a DIV, and can accept markdown-it-attrs? Do I need to define my own container for this?

:::info {.gap-8 .h-20  .border .shadow-xl .ring-1 .ring-slate-900/5 .dark:bg-slate-800}

Some Text Inside the info container.

:::

<div class = "gap-8 h-20  border shadow-xl ring-1 ring-slate-900/5 dark:bg-slate-800">

Some Text Inside the info container.

</div>

[xu4wang]

I end up with creating a new container div, and container div is working as expected.

// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
    ....
    markdown: {
        typographer: true,
        config: (md) => {
          ...
          md.use(require('markdown-it-container'), 'div');
        }
    },
    lastUpdated: true
});