remark.jsというのを知っていますか？知らない方向けに一言で説明すると、マークダウンをHTMLに変換するJavaScriptのツールです。
react-markdownなんかも内部はこれで動いています。
remark.jsはプラグインをサポートしており、自分で自由に構文を作成することができます。今回、はてな記法における
id:cateiruなどのはてなのid記法をremark.jsで使用できるようなプラグインを作成したので紹介します。
使い方
remark.jsを使った例はREADMEにあるので割愛します（割りと簡単で.use()を追加するだけです）
ここでは、react-markdownを使用した使い方について解説します。
まあ、これもそこまで難しいわけでなないです。ReactMarkdownのコンポーネントにはremarkPluginsのpropsが存在するのでそこに渡してあげれば使うことができます。
import React from 'react'; import ReactMarkdown from 'react-markdown'; import { remarkHatenaId } from 'remark-hatena-id'; const Markdown: React.FC<{markdown: string}> = ({markdown}) => { return <ReactMarkdown children={markdown} remarkPlugins={[remarkHatenaId]} /> }
構文は、以下のようなものに対応しています。
# 通常バージョン # はてなブログではそのユーザのブログページに飛ぶがこれはprofile.hatena.ne.jpのユーザーページに飛びます id:cateiru # アイコン付きバージョン # CSSは設定していないので各自設定しましょう id:cateiru:detail # 大きいアイコン付きバージョン id:cateiru:detail:large # アイコンだけ id:cateiru:image
技術的な話
特にそれといったトリッキーなことはしていないですが、強いて言えば今回はviteを使って開発しました。
前までは、typescriptを入れて、、、tsconfig練って、、、jestを入れて、、、で数時間持ってかれていたのがviteでプロジェクトをセットアップしたら数十分で環境が整ってしまい今更ながらジェネレーションギャップを感じました。
これからは、viteとより仲良くなっていこうと誓いました。
実装についても少し話します。プラグイン自体の仕組みは正規表現でid記法を抜き出してHTML要素に変換しているだけです。
正規表現はこんな感じです:
/id:(?<hatenaId>[a-zA-Z0-9\-\_]+)(:(?<option>detail:large|detail|image))?/
いかがでしたか？
もともと、はてな社内で使おうかと思って作ったものなのでそれ以外では使うケースがほぼ無いとは思いますがもし興味があるなら試してみてください。
ではでは ノシ
