つうさにメモブログ

つうさにがメモをブログとして書いていくところ

はてなブログのMarkdown記法の脚注でもツールチップ表示する

Markdown記法でも頑張る

Markdown記法の脚注

はてなブログでは、記事をMarkdownを用いて書くことができ、またMarkdown記法で脚注を書くことについても対応しています1

staff.hatenablog.com

ただし上の記事にある通り、Markdown記法モードでも「はてな記法の脚注(例: ((ここに脚注)))」を書くことができます(というか、もともとMarkdown記法モードでは「はてな記法の脚注」にしか対応してなかった)。

これらの脚注は互換性はなく、以下のように両方の記法の脚注を混ぜて使うと無茶苦茶なことになるため、どちらかに統一する必要があります。

無茶苦茶な例

Markdown記法でのソースとその結果のスクリーンショット

### Markdown記法で両方の記法で脚注する記事
これ((これの脚注))とあれ[^2]
[^2]: あれの脚注

f:id:tsuu_mmj:20190907142334p:plain
無茶苦茶な感じのスクリーンショット

このブログで使っているHandwritingテーマでは、「はてな記法の脚注」は*(アスタリスク)と数字が並んだリンクですが、「Markdown記法の脚注」 は数字だけのリンクで、上付き文字として表示されます。

Markdown記法の脚注」 と「はてな記法の脚注」の違い

Markdown記法の脚注」 と「はてな記法の脚注」の違いはデザインだけではありません。「Markdown記法の脚注」では、脚注のリンク(数字)にマウスオーバーさせても脚注がツールチップとして出てきません2以前書いた記事ではMarkdown記法の脚注を用いましたが、マウスオーバーしてもツールチップが表示されなくてびっくりしました。

はてな記法の脚注」ではツールチップで脚注の内容を表示してくれます。しかし「Markdown記法の脚注」でもツールチップをどうにかして表示したいです。幸いにもはてなブログでは、JavaScriptを書くことでDOMをいじることができます。

ということで今回の記事は、JavaScriptを使ってMarkdown記法でもツールチップを表示してみようという話です。

Markdown記法の脚注でツールチップ表示

まずググったら同じことをしてる人がいました。jQueryで実装しているようです。

blog.ymmtdisk.jp

私の環境ではそのままだと動かなかったので、参考にして自分で書き直しました。

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

スマートフォンでは見られないのが残念です。

ところで上のコード、はてなブログの仕様変更でぶっ壊れそうなのが怖いですね。

参考


  1. 正確にはPHP Markdown Extraの記法。

  2. このブログではこの脚注がツールチップとして出るはずです!!!

  3. 全然関係ないですが、rel="footnote"というのは現在古いものになってるらしいです。 feat(validation): footnotes in HTML 5.2 · Issue #768 · Python-Markdown/markdown · GitHub

  4. tooltip

  5. つーるちっぷ

  6. トゥールティイイイイッッッップゥゥ