画像とリンク
記事内の画像にリンクを付けた。クリックして拡大できるように。
仕組み
もともとこのウェブサイトの記事本文のHTMLは、Markdownで書かれた文字列をHTML形式の木構造に変換し、それをまた文字列に変換する、という方法で生成されていた。今回はこの処理の途中に少し手を加え、木構造に含まれるimg要素をa要素で囲む、という処理を加えることにした。
具体的には、木構造に変換フィルター群を適用して別の木構造にしていく、というパターンで実装している。
https://github.com/r7kamura/r7kamura.com/pull/11
思い出
こういうのは独自記法を実装するときの常套手段で、例えばQiitaやQiita:TeamのMarkdownパーサーなんかも同じ仕組みで実装されている。
当時、emojiやmention、他の記事への言及、外部リンク、シンタックスハイライトやタスクリストなど、Markdownパーサの仕事は日に日に増えつつあり、この要求に耐え得るべく2014年頃に自分が実装し直したものがこれで、今でもまだ元気に動いているはず。