はてなブログのMarkdown記法の脚注でもツールチップ表示する
Markdown記法でも頑張る
Markdown記法の脚注
はてなブログでは、記事をMarkdownを用いて書くことができ、またMarkdown記法で脚注を書くことについても対応しています1。
ただし上の記事にある通り、Markdown記法モードでも「はてな記法の脚注(例: ((ここに脚注))
)」を書くことができます(というか、もともとMarkdown記法モードでは「はてな記法の脚注」にしか対応してなかった)。
これらの脚注は互換性はなく、以下のように両方の記法の脚注を混ぜて使うと無茶苦茶なことになるため、どちらかに統一する必要があります。
無茶苦茶な例
Markdown記法でのソースとその結果のスクリーンショット
### Markdown記法で両方の記法で脚注する記事 これ((これの脚注))とあれ[^2] [^2]: あれの脚注
このブログで使っているHandwritingテーマでは、「はてな記法の脚注」は*(アスタリスク)と数字が並んだリンクですが、「Markdown記法の脚注」 は数字だけのリンクで、上付き文字として表示されます。
「Markdown記法の脚注」 と「はてな記法の脚注」の違い
「Markdown記法の脚注」 と「はてな記法の脚注」の違いはデザインだけではありません。「Markdown記法の脚注」では、脚注のリンク(数字)にマウスオーバーさせても脚注がツールチップとして出てきません2。以前書いた記事ではMarkdown記法の脚注を用いましたが、マウスオーバーしてもツールチップが表示されなくてびっくりしました。
「はてな記法の脚注」ではツールチップで脚注の内容を表示してくれます。しかし「Markdown記法の脚注」でもツールチップをどうにかして表示したいです。幸いにもはてなブログでは、JavaScriptを書くことでDOMをいじることができます。
ということで今回の記事は、JavaScriptを使ってMarkdown記法でもツールチップを表示してみようという話です。
Markdown記法の脚注でツールチップ表示
まずググったら同じことをしてる人がいました。jQueryで実装しているようです。
私の環境ではそのままだと動かなかったので、参考にして自分で書き直しました。
for (let node of document.querySelectorAll('sup[id^=fnref]')) { const anchor = node.querySelector('a'); const footnoteId = anchor.getAttribute('href').replace("#", ""); const footnote = document.getElementById(footnoteId); anchor.setAttribute('title', footnote.textContent.slice(1, -1)); }
はてなブログの管理画面: デザイン > カスタマイズ > フッタ に、上のコードをscript
タグで囲んだものを置いておくことで、「Markdown記法の脚注」でもツールチップを表示させることができます。
以下技術的な話です。
DOM要素のtitle
属性
DOM要素のtitle
属性に文字列を与えると、ブラウザがそれをツールチップとして表示してくれるということを初めて知りました。
title
属性に与える文字列
上の先駆者さんの記事ではMarkdown記法でのソースとその展開結果が書いてありますが、自分のブログでも同様に試してみたところ、少し違う結果となりました。
Markdown記法モードのブログに書くソース
そんなに難しくないです[^1]。 [^1]:とはいえ、慣れは必要かもしれませんが。
展開結果(本文)
<p> そんなに難しくないです<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>。</p>
展開結果(脚注)3
<li id="fn:1"> <p>とはいえ、慣れは必要かもしれませんが。<a href="#fnref:1" rev="footnote">↩</a></p></li>
上の展開結果から、脚注へのリンクは、fnref
で始まるidを持つsup
要素の中に書かれるようです。
また、脚注部分はli
要素に展開されるようです。この要素のtextContent
プロパティを得ると、先頭に改行文字、末尾に↩があります。slice(1, -1)
とすれば、先頭と末尾それぞれ1文字ずつ取り除くことができるので、textContent.slice(1, -1)
として得られた文字列をtitle
属性に与えるといい感じになります。
終わり
「Markdown記法の脚注」でも、脚注のリンクにマウスオーバーすると、ツールチップとしてその内容を表示することができるようになりました。なんだか嬉しくて4どんどん脚注5を置きたくなってしまいます6。
スマートフォンでは見られないのが残念です。
ところで上のコード、はてなブログの仕様変更でぶっ壊れそうなのが怖いですね。
参考
- title - HTML: HyperText Markup Language | MDN
title
属性について
-
正確にはPHP Markdown Extraの記法。↩
-
全然関係ないですが、
rel="footnote"
というのは現在古いものになってるらしいです。 feat(validation): footnotes in HTML 5.2 · Issue #768 · Python-Markdown/markdown · GitHub↩ -
tooltip↩
-
つーるちっぷ↩
-
トゥールティイイイイッッッップゥゥ↩