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属性も自動的に指定されてしまった。

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と２つのクラス属性とlang属性を同時に指定してみる。

markdown

## Le Site ##    {.main .shine #the-site lang=fr}

変換後のHTMLは。

html

<h2 class="main shine" id="the-site" lang="fr">Le Site</h2>

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」という拡張機能を使っていて。