markdown - 将 ID 或 Class 添加到 Markdown-element

Question

是否可以将 id 或类添加到（多）markdown 元素？

例如表格、段落或代码块？

我想用 css 设置表格的样式，但没有以下工作：

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

网上找不到别的了。。

我不是说 github 或 stackoverflow 风味的降价顺便说一句。

Answer 1

出于 CSS 的目的，您可以将 id 添加到前一个元素，然后使用选择器来更改以下元素。

像这样的降价：

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

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

像这样的CSS：

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

Answer 2

您可以通过将类或 id 放在元素之后的大括号内来向元素添加自定义类或 id，如下所示：{#id .class}

例如：

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

将呈现如下：

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

你可以参考https://michelf.ca/projects/php-markdown/extra/#spe-attr

Answer 3

经过一番研究，我想出了一个简单直接的解决方案:)

我在两个 HTML 占位符之间放置了表格，并使用 jQuery 来微调这些，并且只根据需要调整那些：

表的开头

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

桌子

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

表尾

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

jQuery：通过添加类来微调表

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

Answer 4

我只使用文档，解决方案有点不同。DAMIEN JIANG 为我指明了正确的方向。这对我有用：

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

呈现如下：

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