最近、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;
}
よっしゃ!
いや、待てよ。
これだとドキュメント内の全リストに適用されるじゃん。
特定のlistを狙う
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>
優勝