モブログでMarkdownって使えるものなの?(その9:脚注)

ページ内ジャンプを捏造する裏技。


脚注の書き方

拙作のTextwellアクショではMarkdownの変換にmarked.jsを借用しています。このmarked.jsに脚注機能はありません。それで、別の方法でそれっぽいことを実現してみました。

方言によっては、アンカータグの変形で脚注が記述されます。文字の右肩に小さな数字がついて、脚注との間で相互リンクが形成される。タップすれば脚注に飛びます。

江戸時代になるとヤマアラシは妖怪の一種と考えられた[^1]。

[^1]: 鳥山石燕『百器徒然袋』


ただMarkdownに脚注が必要かは議論の分かれるところで、これって紙媒体の作法なんですよね。それをわざわざハイパーリンクにするのってどうなんだろう?


見出しにはidが付いている

そうは言っても、脚注は欲しい。そのための準備をします。今のアクションを研究してみる。marked.jsは見出しを変換すると、hタグにidを生成します。見出しの中から半角英数字を拾い、それをidに設定している。半角英数字以外のものは「-」に置き換わります。


##### top
これがHTMLに変換されると、下記のようになります。
<h5 id="top">top</h5>
idに"top"と入ってますよね。今回のポイントはここです。


リンクでidに飛ぶ

idがあれば、アンカーが使えるようになります。


##### top

[先頭へ](#top)

この組み合わせで、ページ内ジャンプが可能。

top


先頭へ

リンク先を「#id」にすれば、idのある場所に表示を飛ばすことが出来ます。「#」は一個で、そのあとにidをつける。例題のidは「top」だから「#top」。上に戻ってもいいし、下に進んでもいい。どれだけ離れていても、同じページ内なら一瞬で移動できます。


脚注を作る

この仕組みを利用すれば、脚注っぽいことが出来ます。


江戸時代になるとヤマアラシは妖怪の一種と考えられた[注1](#1)。

##### 1
鳥山石燕『百器徒然袋』

江戸時代になるとヤマアラシは妖怪の一種と考えられた注1


1
鳥山石燕『百器徒然袋』

この場合、見出しのデザインが難しいですね。cssでデザインに凝るか。次に来ている段落が注釈というのも分かりにくいし。もう少し工夫の要るところ。


見出し自体を脚注とする

見出しをそのまま転用してみます。


江戸時代になるとヤマアラシは妖怪の一種と考えられた[1]。

[1]:#1-
##### 1.鳥山石燕『百器徒然袋』

日本語の部分はどんなに長くても「-」だけになります。「1.鳥山石燕『百器徒然袋』」はid化されると「1-」になる。この性質を利用して、定義領域で一括管理します。見出しレベル6あたりならフォントも小さいし、注釈っぽくなるんじゃないでしょうか。

江戸時代になるとヤマアラシは妖怪の一種と考えられた1


1.鳥山石燕『百器徒然袋』

スッキリしました。ただし、脚注に英数字が入るとidが難しくなります。年号やページ番号が使えない。その場合は改行し、先頭部分だけの見出しにして回避してください。


javascriptでポップアップ脚注

リンクにはスクリプトが使える。これを利用して、アラートを出す方法を思いつきました。たぶん想定されていない使用法ですが、もし動くんだったら面白い。


江戸時代になるとヤマアラシは妖怪の一種と考えられた[*]。

[*]:javascript:alert("鳥山石燕『百器徒然袋』")

alertで窓を開く。ありですか?

江戸時代になるとヤマアラシは妖怪の一種と考えられた*

ありですわ。こんな方法が有効だとは。スクリプトが動くなら、もっと変なことも出来そう。「脚注」に囚われなくても、「新しい注釈」がMarkdownに隠れています。
はてなダイアリーではリンク内スクリプトは禁じられているので、書いたところで動かないですけど、普通に HTML Preview では動くから原則としては可能。)


まとめ

自分が変態であることを再発見しました。リンクにスクリプトを埋め込むなんて、行儀が悪くて誰もやっていません。でも書いてしまえば既成事実になります。どういう可能性が潜んでいるか、見当がつかない。急にMarkdownの鼓動が聞こえてきた。こいつ、生きてる!