Markdownを使用して段落にクラス名を定義できますか?もしそうなら、どうですか?
Markdownを使用して段落にクラス名を定義できますか?もしそうなら、どうですか?
回答:
Dupe:MarkdownでHTMLクラス属性を設定するにはどうすればよいですか?
いいえ、Markdownの構文はできません。Markdown Extraを介してID値を設定できます。
必要に応じて通常のHTMLを使用し、属性markdown="1"
を追加して、HTML要素内でマークダウン変換を続行できます。ただし、これにはMarkdown Extraが必要です。
<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
<blockquote>
)私は以下をオンラインで見つけました:
関数
function _DoBlockQuotes_callback($matches) {
...cut...
//add id and class details...
$id = $class = '';
if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
foreach ($matches[1] as $match) {
if($match[0]=='#') $type = 'id';
else $type = 'class';
${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
}
foreach ($matches[0] as $match) {
$bq = str_replace($match,'',$bq);
}
}
return _HashBlock(
"<blockquote{$id}{$class}>\n$bq\n</blockquote>"
) . "\n\n";
}
マークダウン
>{.className}{#id}This is the blockquote
結果
<blockquote id="id" class="className">
<p>This is the blockquote</p>
</blockquote>
生のHTMLは実際にはマークダウンで完全に有効です。例えば:
Normal *markdown* paragraph.
<p class="myclass">This paragraph has a class "myclass"</p>
HTMLがコードブロック内にないことを確認してください。
環境がJavaScriptの場合は、プラグインmarkdown-it-attrsとともにmarkdown-itを使用します。
const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);
const src = 'paragraph {.className #id and=attributes}';
// render
let res = md.render(src);
console.log(res);
出力
<p class="className" id="id" and="attributes">paragraph</p>
注意:マークダウンで属性を許可するときは、セキュリティの側面に注意してください!
免責事項、私はmarkdown-it-attrsの作成者です。
マークダウンの人はすべきだはこの機能がが、ありません。代わりに、言語固有のMarkdownスーパーセットが必要です。
PHP: Markdown Extra
Ruby: Kramdown、 Maruku
しかし、真のMarkdown構文に従う必要がある場合は、生のHTMLを挿入することに行き詰まり、あまり理想的ではありません。
@Yarinの回答に続くkramdownの実際の例を次に示します。
A simple paragraph with a class attribute.
{:.yourClass}
リファレンス:https : //kramdown.gettalong.org/syntax.html#inline-attribute-lists
上記のように、マークダウン自体はあなたがこれにぶら下がっています。ただし、実装によっては、いくつかの回避策があります。
MDの少なくとも1つのバージョンは<div>
ブロックレベルのタグと見なされますが、<DIV>
単なるテキストです。ただし、すべてのブロワーは大文字と小文字を区別しません。これにより、divコンテナータグを追加する代わりに、MDの構文の単純さを維持できます。
したがって、以下は回避策です。
<DIV class=foo>
Paragraphs here inherit class foo from above.
</div>
これの欠点は、出力コード<p>
に<div>
行を折り返すタグがあることです(1つは一致しないため、1つは一致しないため、2つ目です。ブラウザーがこれについてわずらわしく思ったことはありませんが、コードはt検証MDは<p>
とにかく予備のタグを付ける傾向があります。
マークダウンのいくつかのバージョンは、<tag markdown="1">
MDがタグ内で通常の処理を行う場合の規則を実装しています。上記の例は次のようになります。
<div markdown="1" class=foo>
Paragraphs here inherit class foo from above.
</div>
FletcherのMultiMarkdownの現在のバージョンでは、参照リンクを使用している場合、属性がリンクをたどることができます。
また、<span>
タグはタグ内で許可されていることも言及しておく必要があります。ブロックレベルのアイテムは、設定しない限り、ネイティブでMDを無効にしますが、インラインスタイルでは、タグ内でMDをネイティブで許可します。そのため、私はよく似たようなことをしています...
This is a superfluous paragraph thing.
<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>
And thus with that I conclude.
これが普遍的なものであるかどうかは100%わかりませんが、これまで使用してきたすべてのMDエディタに当てはまるようです。
JavaScriptの目的でセレクターが必要なだけの場合(私が行ったように)、またはのhref
代わりに属性を使用することもできます。class
id
これを行うだけです:
<a href="#foo">Link</a>
Markdown href
は、クラスやIDの場合のように属性を無視または削除しません。
したがって、JavaScriptまたはjQueryで次のことができます。
$('a[href$="foo"]').click(function(event) {
... do your thing ...
event.preventDefault();
});
少なくとも、これは私のバージョンのMarkdownで機能します...