はじめに

普段､VScodeでMarkdownを使っていると､たまに振り仮名を使いたくなる時がある｡振り仮名をふるにはHTMLの<ruby>でマークアップするのだが､せっかくMarkdownを使っているのだから簡単に使いたい｡

そこで調べたところ､furigana-markdown-itというnpmパッケージと､それを利用して作ったVScode拡張機能のMarkdown Furiganaを見つけたので紹介する｡

Markdown Furigana

インストール

VScode拡張機能の欄で「furigana」と入力すれば､「Markdown Furigana」が表示されるのでインストールする｡

拡張機能:Markdown Furigana - Visual Studio Marketplace

使い方

[]で漢字を囲い､{}で振り仮名を囲う

foo.md

[猫]{ねこ}

この状態でMarkdownのプレビューを見れば､

猫(ねこ)

と表示される｡

より詳しい使い方

インプット	リザルト	説明
[漢字]{かんじ}	漢字(かんじ)	基本の形｡文字全体に均等に振り仮名をふる｡
[漢字]{かん・じ}	漢(かん)字(じ)	中黒で分けることで､それぞれの文字に振り仮名をふることができる｡
[取り返す]{とりかえす}	取(と)り返(かえ)す	漢字だけに振ろうとしなくとも､送り仮名と重複される振り仮名は無視されて均等に振られる｡
[可愛い犬]{かわいいいぬ}	可愛(かわいい)い犬(ぬ)	しかし､上記のシステムが災いして､予期せぬ振りかたになることもある｡
[可愛い犬]{か・わい・いいぬ}	可(か)愛(わい)い犬(いぬ)	そういうときは､ちゃんと中黒を使うこと｡
[可愛い犬]{か＋わい・いいぬ}	可愛(かわい)い犬(いぬ)	中黒と+を組み合わせることもできる｡
[食べる]{たべる}	食(た)べる	上のシステム通り重複する振り仮名は無視される｡
[食べる]{=たべる}	食べる(たべる)	もし､送り仮名も振り仮名に含めたいなら「=」を使う
[アクセラレータ]{accelerator}	アクセラレータ(accelerator)	英語を振る事も当然できる
[accelerator]{アクセラレータ}	accelerator(アクセラレータ)	逆に英語に振ることもできる
[あいうえお]{*}	あ●い●う●え●お●	「*」を使うと､黒点を均等に振り仮名として振って強調できる｡
[あいうえお]{*❤}	あ❤い❤う❤え❤お❤	任意の文字を振ることもできる｡

できないこと

インプット	リザルト	説明
`[漢字]{かんじ}`	漢字(かんじ)	太字にした文字に振り仮名をふることはできない｡
`[漢字]{かんじ}`	漢字(かんじ)	振り仮名ごと「*」で囲むとうまくいく｡
[バカな奴]{ばかなやつ}	バカな奴(ばかなやつ)	「バカ」と「ばか」は別の文字として認識される
[「はい」と言った]{「はい」といった}	「はい」と言った(「はい」といった)	同じ記号でも､記号は別の文字として認識される

furigana-markdown-it

以上で､VScodeで振り仮名を簡単に振れるようになる｡
ただ､人によっては自作のMarkdownエディタにこの機能を取り込みたい人もいると思うので､npmパッケージについても説明する｡

Git:iltrof/furigana-markdown-it: Furigana plugin for markdown-it

インストール

npmでインストール

npm install furigana-markdown-it

JavaScriptファイルへの導入

index.js

const md = require("markdown-it")(),
  furigana = require("furigana-markdown-it")();

md.use(furigana);

オプション

furigana-markdown-itにはオプションが存在し､requireする際に指定できる｡
オプションは三つ｡

index.js

const furigana = require("furigana-markdown-it")({
  fallbackParens: "()",
  extraSeparators: "-",
  extraCombinators: "'"
});

fallbackParens

<ruby>が使用できない環境で使用されるフォールバックのカッコを変えることができる｡
デフォルトは【】｡
たとえば､[漢字]{かんじ}と入力しても反映されないときは､自動で漢字【かんじ】となる｡この【】を任意の記号に変えられる｡

上記の設定では漢字(かんじ)となる｡

extraSeparators

振り仮名を振り分けることができる記号を指定できる｡
デフォルトは.．。・|｜/／｡

上記の設定では[漢字]{かん-じ}と書ける｡

extraCombinators

特定の箇所の振り仮名を均等に振り分けるための記号を指定できる｡
デフォルトは+｡

上記の設定では､[可愛い犬]{か'わい・いいぬ}と書ける｡

参考サイト