最近、markdownからHTMLへの変換にmarkdown-itを使っている。特に深い理由は無いけど、Visual Studio Codeのサイトに紹介されているからなんとなく。

リストの書き方のおさらい

Markdownではlistを簡単に書ける。コンパイルすると単純なHTMLになる。

- a
- b
- c

echo $'- a\n- b\n- c\n' | node_modules/.bin/markdown-it

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

Flexboxを使って横並び

ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

ul li {
    display: inline-flex;
}

よっしゃ！

いや、待てよ。
これだとドキュメント内の全リストに適用されるじゃん。

CSSでは適用範囲を絞るのにclassを使うのが一般的だよね。

しかしCommonMarkにはまだ属性を指定する方法が定まっていないので、<ul>要素にはclassを直接付与できない。

markdown-itはプラグインがあるようだけど、どうせこの時点では属性記法が定まっていないしHTMLにしか変換しないから、直接<div>要素を書いてしまおうではないか！

.hoge ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.hoge ul li {
    display: inline-flex;
}

<div class="hoge">

- a
- b
- c

</div>

echo $'<div class="hoge">\n\n- a\n- b\n- c\n\n</div>\n' | node_modules/.bin/markdown-it

<div class="hoge">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>

優勝