web-dev-qa-db-ja.com

Markdown要素にIDまたはクラスを追加します

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フレーバーのマークダウンを意味するのではありません。

markdownmultimarkdown
24
Tieme

kramdown で動作することを確認できます。幸せな狩猟。

マークダウン

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

css

.foo {
  background: blue;
}
43
Steven Penny

いくつかの調査の後、私はシンプルで簡単な解決策を思いつきます:)

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>
4
wik

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

次のように、要素の後に中括弧内にクラスまたは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

2
DAMIEN JIANG