モブログで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
鳥山石燕『百器徒然袋』
この場合、見出しのデザインが難しいですね。cssでデザインに凝るか。次に来ている段落が注釈というのも分かりにくいし。もう少し工夫の要るところ。
見出し自体を脚注とする
見出しをそのまま転用してみます。
江戸時代になるとヤマアラシは妖怪の一種と考えられた[1]。[1]:#1-
##### 1.鳥山石燕『百器徒然袋』
日本語の部分はどんなに長くても「-」だけになります。「1.鳥山石燕『百器徒然袋』」はid化されると「1-」になる。この性質を利用して、定義領域で一括管理します。見出しレベル6あたりならフォントも小さいし、注釈っぽくなるんじゃないでしょうか。
1.鳥山石燕『百器徒然袋』
スッキリしました。ただし、脚注に英数字が入るとidが難しくなります。年号やページ番号が使えない。その場合は改行し、先頭部分だけの見出しにして回避してください。
javascriptでポップアップ脚注
リンクにはスクリプトが使える。これを利用して、アラートを出す方法を思いつきました。たぶん想定されていない使用法ですが、もし動くんだったら面白い。
江戸時代になるとヤマアラシは妖怪の一種と考えられた[*]。[*]:javascript:alert("鳥山石燕『百器徒然袋』")
alertで窓を開く。ありですか?ありですわ。こんな方法が有効だとは。スクリプトが動くなら、もっと変なことも出来そう。「脚注」に囚われなくても、「新しい注釈」がMarkdownに隠れています。
(はてなダイアリーではリンク内スクリプトは禁じられているので、書いたところで動かないですけど、普通に HTML Preview では動くから原則としては可能。)
まとめ
自分が変態であることを再発見しました。リンクにスクリプトを埋め込むなんて、行儀が悪くて誰もやっていません。でも書いてしまえば既成事実になります。どういう可能性が潜んでいるか、見当がつかない。急にMarkdownの鼓動が聞こえてきた。こいつ、生きてる!