Add ID or Class to Markdown-element

Question

Is it possible to add an id or class to a (multi)markdown element?

For example a table, a paragraph or block of code?

I would like to style a table with css but non of following work:

[captionid][This is the caption, not the table id]
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

---

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
[captionid][This is the caption, not the table id]

---

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
[tablecaption](#tableid)

---

<div class="special_table">

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

</div>

Can't find anything else online..

I dont mean github or stackoverflow flavored markdown btw.

Abisha

Answer 1

For CSS purposes you could add an id to the previous element and then use a selector to alter the following element.

Markdown like this:

<div class="special_table"></div>

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

CSS like this:

div.special_table + table tr:nth-child(even) {background: #922}

Bryan

Answer 2

You can add a custom class or id to an element by putting the class or id inside a curly bracket after the element like this: {#id .class}

For example:

[Read more](http://www.stackoverflow.com "read more"){#link-sf .btn-read-more}

will be rendered like below:

<a href="http://www.stackoverflow.com" title="read more" id="link-sf" class="btn-read-more">Read more</a>

You can refer to https://michelf.ca/projects/php-markdown/extra/#spe-attr

Sprain

Personally, this one doesn't work on docusaurus :( – Okelley

how will this work for tables? – Lima

not working on mkdocs either – Supplant

Answer 3

After some research, I come up with a simple and straight forward solution :)

I placed tables in between of two HTML placeholders and used jQuery to fine tune those and only those as needed:

Beginning of Table

<div class="tables-start"></div>

Table

id | name ---|--- 1 | London 2 | Paris 3 | Berlin

End of Table

<div class="tables-end"></div>

jQuery: Fine tune tables by adding the classes

<script type="text/javascript">
(function() {
    $('div.tables-begin').nextUntil('div.tables-end', 'table').addClass('table table-bordered');
})();
</script>

Prenatal

Just wrap the markdown table with a div :) ? and then .foo table { color: red; } - why javascript? – Liponis

Good point @BadrHari, however question clearly asks how to add "Class" or "Id" to markdown element ;) – Prenatal

It should be $('div.tables-start'), not $('div.tables-begin') – Revise

@BadrHari - Tried that under mkdocs-material and as a side effect the enclosed markdown was not translated to html. – Kaleena

Answer 4

{.table-class}
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6  {.any-class} |

Astonishing

Answer 5

I was using just the docs and the solution was a little different. DAMIEN JIANG point me in the right direction. This did the trick for me:

[[2]](references#2){: #references-2 }

Which is rendered like:

<a href="references#2" id="references-2">[2]</a>

Predesignate

This one also doesn't work on docusaurus – Okelley