さて、実際に自分CSSフレームワークを作っていく前に、ALDsについて確認しておきたいことがある。それは HTMLの中に書かれた Markdown についてだ。

Markdown は、生の HTML を書くこともできて、それが期待通りに変換される。ただ一行に書かれた単純な HTML の断片では気が付かないが、ほんの少し複雑な HTMLブロックを書くと、そのブロックの中の要素には先にみたような方法ではCSSクラス名が渡せない。それをどうしてもしなければならない場面はあまりないと思うけど、一応回避方法を知っておくのは、何かの役に立つ。

Markdown(Kramdown) 内のHTMLで Markdown を変換する

以下の方法は、あくまで Kramdown に限定した方法です。他のパーサなどでどうやるかは調べてません。

[Source]

Jekyll: How to get markdown parsing inside blocks using Kramdown?

Kramdown でのデフォルトの動作

jekyll で Markdown(Kramdown)を使っている際、HTMLの直書きはそのままHTMLに変換されるのだけれど、そのHTMLの中の Markdown は変換されない。普通は….

[markdown]

<div>
# Headline2
------------
</div>
# Headline2 ------------

[html]

<div>
# Headline2
------------
</div>

ただの文字列に（;o;）

ずっとそういうものだと思っていたが、これはデフォルトの動作で、実はオプションで変えられる。

parse_block_html オプション

ドキュメントの中にparse_block_htmlオプションを有効にする記述を入れる。

{::options parse_block_html="true" /}

するとその設定変更を書いた行以降のHTML内で Markdown が有効になる。

[markdown]

<div>
# Headline2
------------
</div>

Headline2

[html]

<div>
  <h1 id="headline2">Headline2</h1>
  <hr>
</div>

_config.yml に書く方法

しかしいちいち記事に書くのは面倒くさい。 そこで_config.ymlに書いておいて、全ページで有効になる方法も用意されている。

[_config.yml]

markdown: kramdown
kramdown: 
  parse_block_html: true

こうやって設定変更しておけば、例えばフォーム要素の中のinputやbuttonにクラス名を渡したりできるので、_includesや_layoutsのテンプレートに Markdown を使ってCSSクラスを設定しておいたりできる。

[html&markdown]

<form>
  <input>
  <button>Button</button>{: .button}
</form>{: .test-form}

[html]

<form class="test-form">
  <p><input>
<button class="button">Button</button></p>
</form>

ただし、よけいな<P>とか入ってしまうのが難点。インデントを外しても入ってしまう。

マニュアルによれば「このオプションがtrueの場合、kramdownパーサーはブロックHTMLタグの内容をブロックレベルの要素を含むテキストとして処理する」とあるので、そこが問題かと。

これはいつも有効にしたい機能とは言えない。だからデフォルトはfalseになっているのだろう。したがってこの_config.ymlに設定を書いてしまうやりかたは、一見便利だがあまりおすすめできない。マニュアルにしたがって「markdown属性を介してkramdown処理を選択的に有効にする」、つまりドキュメントで使いたい箇所の直前にtrueにし、外したい場所でfalseに戻すのが賢いやり方だろう。

まあ、実際これ使うかっていうと、class="class-name"が{: .class-name}になる程度と、多少テンプレの見た目がすっきりする程度の話。HTMLに直接class="class-name"と書けば手作りのスタイルも活きるので、あまり意味が無いかもしれないなー(笑)。

parse_span_html オプション

ちなみに「スパンHTMLタグ内のkramdown構文を処理する」というインライン版のオプションparse_span_htmlもある。こちらはデフォルトで有効になっているようだ。

[markdown & html]

<label><span>*Title H4*</span>{: .test-class}</label>

[html]

<label><span class="test-class"><em>Title H4</em></span></label>

無効にするとこんなのになってしまう。

{::options parse_span_html="false" /}

*Title H4*{: .test-class}

それとparse_block_htmlオプションのように有効にした区間だけ有効になるのではなく、parse_span_html="false"を書いたドキュメント単位で無効になる（それを書いた記事の位置より前の記述もfalse扱いになる）ので使い方に注意が必要だ。