Adám
Pandoc's markdown allows:
```markdown
:::classname
content
:::
```
which renders as
```html
<div class="classname">
<p>content</p>
</div>
```
We could selectively allow custom CSS by allowing the `:::` fence syntax and creating class names for selected white-listed CSS, e.g.
```css
font-face\3A monospace {
font-family: monospace;
}
```
so we can write:
```markdown
:::font-family:monospace
content
:::
```
Then we can always add more CSS-rule classes later.
**Note:** Do *not* allow arbitrary CSS, as that can be dangerous to users.
Top Answer
Jack Douglas
I'm marking this as `wont-fix` because it is (too) generic — we'll consider requests for markdown plugins that serve a specific need (such as monospace perhaps) but I don't think there needs to be a generic implementation like this.
So we might add something like:
```
:::monospace
content
:::
```
but not
```
:::font-family:monospace
content
:::
```
> Then we can always add more CSS-rule classes later.
adding plugins is relatively trivial from a code perspective, so that side of things isn't an issue. We just want to be very careful we are sure they meet a specific need first, because removing them isn't so straightforward once they are in use, and each one will add it's own maintenance burden.
Answer #2
David
I really like this idea. I see that it originated in the discussion over whether tables should have [proportional or monospaced fonts][1], but the potential use-cases go beyond anticipating custom CSS.
There is, I *think*, a [Markdown-it plugin][2] which provides this functionality: `markdown-it-container-pandoc`.
**Backstory**: the site on which I was most active on the SE network often involved long essays as answers (sometimes as questions!) and often enough I wished I could add "id" to my headings to function as inner-links. TA already generates an ID based on any `<h*>...</h*>` text, but that could be quite cumbersome (almost inevitably spaces are involved which require `%20` in the link). But something like:
```markdown
::: {#myhead3}
## My subheading in a very long essay
:::
```
Would provide:
```html
<div id="myhead3">
<h2 id="all_the_TA_stuff_here">My subheading in a very long essay</h2>
</div>
```
which I think would be great. There may well be drawbacks I'm missing (e.g. is this the "arbitrary CSS" that Adám's warned about at the end of his question?), but meanwhile ... yes, please!
[1]: https://topanswers.xyz/meta?q=646
[2]: https://www.npmjs.com/package/markdown-it-container-pandoc?activeTab=readme