将标识或类添加到Markdown元素

Question

是否可以在（多）降价元素中添加id或类？

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

我想用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风味降价btw。

Answer 1

我可以确认这与kramdown一起使用。快乐的狩猎。

降价

{:.foo}
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

CSS

.foo {
  background: blue;
}

Answer 2

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

我将表放在两个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 3

您可以通过将类或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 4

出于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 5

我使用的是 just the docs，但解决方案略有不同。 DAMIEN JIANG 为我指明了正确的方向。这对我有用：

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

呈现如下：

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