画像とリンク

記事内の画像にリンクを付けた。クリックして拡大できるように。

特に脈絡の無いサメのぬいぐるみの画像

仕組み

もともとこのウェブサイトの記事本文のHTMLは、Markdownで書かれた文字列をHTML形式の木構造に変換し、それをまた文字列に変換する、という方法で生成されていた。今回はこの処理の途中に少し手を加え、木構造に含まれるimg要素をa要素で囲む、という処理を加えることにした。

具体的には、木構造に変換フィルター群を適用して別の木構造にしていく、というパターンで実装している。

https://github.com/r7kamura/r7kamura.com/pull/11

思い出

こういうのは独自記法を実装するときの常套手段で、例えばQiitaやQiita:TeamのMarkdownパーサーなんかも同じ仕組みで実装されている。

当時、emojiやmention、他の記事への言及、外部リンク、シンタックスハイライトやタスクリストなど、Markdownパーサの仕事は日に日に増えつつあり、この要求に耐え得るべく2014年頃に自分が実装し直したものがこれで、今でもまだ元気に動いているはず。

https://github.com/increments/qiita-markdown