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.

Richard · Answer 1 · 2018-09-21T14:34:41.427

14

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}

edited Sep 21 '18 at 14:34

answered Sep 21 '18 at 14:13

Richard

14,798
21
70
103

DAMIEN JIANG · Answer 2 · 2019-04-17T04:42:52.177

8

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

edited Apr 17 '19 at 04:42

answered Dec 18 '16 at 22:56

DAMIEN JIANG

573
4
16

1

Personally, this one doesn't work on docusaurus :( – Some Dev Mar 06 '22 at 00:01
3

how will this work for tables? – SCI Nov 16 '22 at 14:54

score 6 · Answer 3 · answered Aug 28 '15 at 22:08

6

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>

answered Aug 28 '15 at 22:08

wik

2,462
1
24
29

Just wrap the markdown table with a div :) ? and then .foo table { color: red; } - why javascript? – Badr Hari Feb 06 '16 at 17:20
1

Good point @BadrHari, however question clearly asks how to add "Class" or "Id" to markdown element ;) – wik Feb 07 '16 at 03:58
1

It should be $('div.tables-start'), not $('div.tables-begin') – Johnny Feb 14 '20 at 07:19
@BadrHari - Tried that under mkdocs-material and as a side effect the enclosed markdown was not translated to html. – Craig Hicks Oct 18 '20 at 00:02

score 0 · Answer 4 · answered Jul 18 '21 at 21:33

0

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>

answered Jul 18 '21 at 21:33

Sebastian Jimenez

57
6

1

This one also doesn't work on docusaurus – Some Dev Mar 06 '22 at 00:03

Add ID or Class to Markdown-element

4 Answers4

Beginning of Table

Table

End of Table

jQuery: Fine tune tables by adding the classes

Linked