Добавить идентификатор или класс в элемент Markdown

Можно ли добавить id или класс к элементу (multi) 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 ароматизированную уценку btw.

Ответ 1

Я могу подтвердить это, чтобы работать с kramdown. Счастливая охота.

уценки

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

CSS

.foo {
  background: blue;
}

Ответ 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>

Ответ 3

Вы можете добавить пользовательский класс или идентификатор к элементу, поместив класс или идентификатор в фигурную скобку после элемента, например: {#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

Ответ 4

В целях CSS вы можете добавить идентификатор к предыдущему элементу, а затем использовать селектор для изменения следующего элемента.

Уценка так:

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