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.

Solution 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}

Solution 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

Solution 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>