markdownでHTMLのidやクラスなどの属性を指定
初回公開:
最終更新:2018/01/01
通常、markdownではHTMLのid属性やclass属性などの属性を指定する事ができない。
しいて指定しようとすると、markdownのドキュメントの中でhtmlを直書きするしかない。
ところがPHP Markdown ExtraのSpecial Attributesの機能を使うと、なんとmarkdownでHTMLのid属性やclass属性そして任意の他の属性も指定できる。
Sublime Text3のOmniMarkupPreviewerプラグインにて動作を確認。
【 目次 】
id属性を指定
id属性の指定は{}の中にcssと同じように「#」を付けて指定する。
markdown
Header 1 {#header1} ========
「Header 1」と「{#header1}」の間にひとつ以上の空白文字が必要みたい。
これは次のhtmlに変換される。
html
<h1 id="header1">Header 1</h1>
そして、id属性の指定してあるリンクにジャンプするには
markdown
[header 1へ](#header1)
変換後のHTMLは。
html
<a href="#header1">header 1へ</a>
クラス属性を指定
クラス属性を指定するにはこれもcssと同様、ドット「.」を付けてクラス名を指定。
markdown
## The Site {.main}
変換後のHTMLは。
html
<h2 class="main" id="the-site">The Site</h2>
なぜかid属性も自動的に指定されてしまった。
id属性やclass属性以外の任意属性を指定
style属性を指定してみる。
markdown
## The Site2 {style=color:red;background-color:bule;}
変換後のHTMLは。
html
<h2 id="the-site2" style="color:red;background:blue">The Site2</h2>
style属性の値の指定の「:」の後とかに余計なスペースを入れてしまうとうまく変換されない。
複雑な属性を指定
idと2つのクラス属性とlang属性を同時に指定してみる。
markdown
## Le Site ## {.main .shine #the-site lang=fr}
変換後のHTMLは。
html
<h2 class="main shine" id="the-site" lang="fr">Le Site</h2>
見出しタグ<h>以外のmarkdownにも使えるみたい
pタグ(段落)の例
markdown
あいうえお {#aiueo style=color:red;background:blue;}
pタグ(段落)の場合は改行の後に指定する必要があるみたい。
変換後のHTMLは。
html
<p id="aiueo" style="color:red;background:blue;">あいうえお</p>
段落内の特定の文字列に属性を指定する例
段落内の特定の文字列に属性を指定するには、強調を示す*文字列*
を利用して
markdown
こんにちは*お元気*{#ogenki style=color:red;background:blue;}ですか?
変換後のHTMLは。
html
<p>こんにちは<em id="ogenki" style="color:red;background:blue;">お元気</em>ですか?</p>
参考
Sublime Text3のOmniMarkupPreviewerプラグインはPython-Markdownの「Attribute Lists Extension」という拡張機能を使っていて。