Any way to pass a css class or ID to an element?

[Rui-Santos]

Not really an issue, more of a question, as I couldn't find anything about that. The problem is, I have diferent tables on diferent pages and would like to style them seperately, and it doesn't seem possible, as the only specific ID's I see are in the headings, which don't wrap anything more than the headings. I know I can use HTML and wrap the table in a div or something, but was avoiding to use it, as I prefer to keep the pages markdown only.

[yyx990803]

The only way I can think of is registering a custom container (with https://vuepress.vuejs.org/config/#markdown-config + https://github.com/markdown-it/markdown-it-container) so you can wrap your table inside something:

::: wrapper id-of-the-table
// normal markdown table
:::

[eyleron]

Could someone add to their own instance markdown-it-attrs?

Input:

# header {.style-me}
paragraph {data-toggle=modal}

Output:

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

[mbana]

Could someone add to their own instance markdown-it-attrs?

Input:

# header {.style-me}
paragraph {data-toggle=modal}

Output:

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

Have you actually tried this with a [[toc]]. I think you will find that {.style-me} gets included in the table of contents.

[elmasry]

You can use markdown-it-attrs

$ npm install --save markdown-it-attrs

Include it in config.js

module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-attrs'), {
        // optional, these are default options
        leftDelimiter: '{',
        rightDelimiter: '}',
        allowedAttributes: []  // empty array = all attributes are allowed
      })
    }
  }
}

Example input:

# header {.style-me}
paragraph {data-toggle=modal}

Output:

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

More info https://www.npmjs.com/package/markdown-it-attrs