将标识或类添加到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风味的降价顺便说一句.

Answer 1

我可以确认这与kramdown合作.快乐狩猎.

降价

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

CSS

.foo {
  background: blue;
}

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

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

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

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