pandocでmarkdownを1ファイルのhtmlに変換する

pandoc Note

pandocでmarkdownを1ファイルのhtmlに変換する備忘録です。

md -> html

まず、単純にmarkdownをhtmlに変換する場合。

pandoc readme.md -s -o readme.html

pandocのオプションに以下があります。

項目 オプション 備考
style(css) -c path/to/file.css cssを使用
リソースを埋め込む --self-contained imgやcssをhtmlに埋め込み、1ファイルにまとめる
toc --toc 目次を設定

一通り含めると以下の通り

pandoc readme.md -s -o readme.html -c style.css --self-contained --toc

ただ、tocを含めるとレイアウトとしていまいちなため、templateを用意します。

template

templateの作成

pandoc -D html5 > template.html

さらにtemplateを含めると以下の通り

pandoc readme.md -s -o readme.html -c style.css --self-contained --toc --template=template.html

このtemplate.htmlを編集します。

tocを左サイドに固定

display:flexとposition:stickyで実現できます。

元のtemplate(一部)

$if(toc)$
<nav id="$idprefix$TOC">
$table-of-contents$
</nav>
$endif$
$body$
$for(include-after)$
$include-after$
$endfor$

変更後のtemplate(一部)

<div style="display: flex">
$if(toc)$
<div>
<nav id="$idprefix$TOC" style="top:1rem; position: sticky;">
$table-of-contents$
</nav>
</div>
$endif$
<div>
$body$
</div>

$for(include-after)$
$include-after$
$endfor$
</div>

参考