Markdownの脚注を本気出して考えてみた

　Wordpress JetpackのMarkdownを使用しています。脚注を使用するの、ちょっと憧れがありました(なんかかっこいいじゃん)。Markdownで脚注をプラグインなしに扱えるということで、その使い方とカスタマイズについて書いてみます。

まずは使い方

　そんなに難しくないです¹。

　そんなに難しくないです[^1]。
[^1]:とはいえ、慣れは必要かもしれませんが。

　とまあ、こういうMarkdownの入力をしておけば、参照リンクとエントリーの最後に脚注一覧を追加してくれます。頭良いですね、Markdown。使い方についてはここではこれ以上詳しく突っ込みません。他の詳しい解説サイトを参照してください。

不満

　なにが不満かというと、参照リンクにマウスカーソルをホバーしたときに脚注が読める、いわゆるツールチップが欲しいんですよ。単純に参照リンクのtitle属性に脚注を入れてくれればいいだけなんですけど、それはどのように記述してもやってくれないようで。

カスタマイズ

　そんなわけでDIY。まずはMarkdownがどのようにHTMLに展開されるのかを見てみよう。

<p>　そんなに難しくないです<sup id="fnref-3328-1"><a href="#fn-3328-1" rel="footnote">1</a></sup>。</p>

<div class="footnotes">
    <hr />
    <ol>
        <li id="fn-3328-1">
            とはいえ、慣れは必要かもしれませんが。&#160;<a href="#fnref-3328-1" rev="footnote">&#8617;</a>
        </li>
    </ol>
</div>

　参照リンクのIDを見て、脚注からテキストを取得してtitle属性に入れてやればいいことがなんとなくわかる。それでなんとなく書いてみたJavascriptがこう。
　ついでに、参照リンクが小さすぎるので大括弧で囲んでいたり、テキストの後ろにあるnbspとリターン記号はsliceで削除したりしている。

jQuery(function($){
    $("sup[id^=fnref]").each(function($i,$sup){
        $ref = $($($sup).find("a").get(0));
        var $note = $(".footnotes "+$ref.attr("href"));
        // MOD 2014/08/11 consoleは不要な上、環境によって動かないです。ごめんなさい……
        //console.log($note.text());
        $ref.attr("title", $note.text().slice(0,$note.text().length-2)).addClass('js-smallipop').text("["+$ref.text()+"]");
    });
});

　ここまでで、脚注の文言を参照リンクのtitle属性に入れる、ということができた。

さらに、ついでに

　SmallipopというjQueryプラグインを入れてツールチップ豪華にしてみる。これはtitle属性をツールチップにするタイプ。
　変更点は下記。参照リンクにclassを追加して、それに対してSmallipopを設定している。

jQuery(function($){
    $("sup[id^=fnref]").each(function($i,$sup){
        $ref = $($($sup).find("a").get(0));
        var $note = $(".footnotes "+$ref.attr("href"));
        // MOD 2014/08/11 consoleは不要な上、環境によって動かないです。ごめんなさい……
        //console.log($note.text());
        $ref.attr("title", $note.text().slice(0,$note.text().length-2)).addClass('js-smallipop').text("["+$ref.text()+"]");
    });
    $("a.js-smallipop").smallipop({
        theme: "white",
        preferredPosition: "bottom",
        popupYOffset: -14,
        popupAnimationSpeed: 0
    });
});

　ここまでやって、今このサイトの現状となる。Smallipopまでは別にやらなくても良かったかもしれない、と思っていたりするけど。

　もっと効率のいい方法があれば教えてください。