日記

内容の正しさは保証しません

markdownをhtmlに変換して脚注を表示する

Githubwikiでドキュメントを公開しようとしたら、脚注が使用できなかったので、htmlに変換することにした。変換にはPandocを用いた。

pandoc -f markdown -t html --template=template --mathjax ファイル名.md > ファイル名.html

ついでに、

を行った。

外観

Githubと外観を合わせるために、Githubからcssをコピーしてtemplateから参照するようにする。

Pandocを使ってMarkdownを整形されたHTMLに変換する - Qiita

githubのmarkdown-cssをぶっこ抜く方法 - Qiita

ツールチップ

jqueryを使ってhtmlを書き換える。

$(() => {
    $(".footnote-ref").each((i, x) => {
        $(x).wrap("<span class='tooltip'></span>");
        
        let foot_note = $("#fn" + (i + 1) + "> p")
            .text()
            .replace("↩︎", "");
        $(x).after("<span class='tooltip-frame'><span class='tooltip-text'>" + foot_note + "</span></span>");
    });
});

jQuery 日本語リファレンス

ツールチップの実装は省略。

数式

pandocに--mathjaxを与えるだけで、$$数式$$で囲まれた数式が表示される。

$$ i = \sqrt{-1} $$


i = \sqrt{-1}
と表示される。