12周年記念パーティ開催! 2024/5/10(金) 19:00

unifiedとrehypeによるHTMLの加工

全2回

unifiedとrehypeを使い、HTMLを加工する方法を解説します。たとえば、CMSの場合において「WYSIWYGのようなHTMLを加工する」「h2だけを拾って目次のページ内アンカーを作る」などの場合に活用できます。

後編 構文木を操作してみよう

HTMLの文字列からh2だけで見出しを作り、目次に加工したHTMLに変換する例を解説します。今回は自分で構木文を操作し、unifiedの処理の中でそれらがどんな仕組みで動いているかを理解してみましょう。

前編 unifiedとはどういうものなのか

「CMSのWYSIWYGで入力されたデータにdivやクラスを追加したい」とか「見出しから目次を作りたい」など、自由にHTMLを加工したいという要望はないでしょうか。unifiedというnpmパッケージでrehypeにあるプラグインを利用すると、自分が希望する操作を行えます。