はじめに
普段、VScodeでMarkdownを使っていると、たまに振り仮名を使いたくなる時がある。振り仮名をふるにはHTMLの<ruby>
でマークアップするのだが、せっかくMarkdownを使っているのだから簡単に使いたい。
そこで調べたところ、furigana-markdown-it
というnpmパッケージと、それを利用して作ったVScode拡張機能のMarkdown Furigana
を見つけたので紹介する。
Markdown Furigana
インストール
VScode拡張機能の欄で「furigana」と入力すれば、「Markdown Furigana」が表示されるのでインストールする。
拡張機能:Markdown Furigana - Visual Studio Marketplace
使い方
[]
で漢字を囲い、{}
で振り仮名を囲う
[猫]{ねこ}
この状態でMarkdownのプレビューを見れば、
猫
と表示される。
より詳しい使い方
インプット | リザルト | 説明 |
---|---|---|
[漢字]{かんじ} | 漢字 |
基本の形。 文字全体に均等に振り仮名をふる。 |
[漢字]{かん・じ} | 漢字 |
中黒で分けることで、それぞれの文字に振り仮名をふることができる。 |
[取り返す]{とりかえす} | 取り返す |
漢字だけに振ろうとしなくとも、送り仮名と重複される振り仮名は無視されて均等に振られる。 |
[可愛い犬]{かわいいいぬ} | 可愛い犬 |
しかし、上記のシステムが災いして、予期せぬ振りかたになることもある。 |
[可愛い犬]{か・わい・いいぬ} | 可愛い犬 |
そういうときは、ちゃんと中黒を使うこと。 |
[可愛い犬]{か+わい・いいぬ} | 可愛い犬 |
中黒と+を組み合わせることもできる。 |
[食べる]{たべる} | 食べる |
上のシステム通り重複する振り仮名は無視される。 |
[食べる]{=たべる} | 食べる |
もし、送り仮名も振り仮名に含めたいなら「=」を使う |
[アクセラレータ]{accelerator} | アクセラレータ |
英語を振る事も当然できる |
[accelerator]{アクセラレータ} | accelerator |
逆に英語に振ることもできる |
[あいうえお]{*} | あいうえお |
「*」を使うと、黒点を均等に振り仮名として振って強調できる。 |
[あいうえお]{*❤} | あいうえお |
任意の文字を振ることもできる。 |
できないこと
インプット | リザルト | 説明 |
---|---|---|
[**漢字**]{かんじ} |
漢字 |
太字にした文字に振り仮名をふることはできない。 |
**[漢字]{かんじ}** |
漢字 | 振り仮名ごと「*」で囲むとうまくいく。 |
[バカな奴]{ばかなやつ} | バカな奴 | 「バカ」と「ばか」は別の文字として認識される |
[「はい」と言った]{「はい」といった} | 「はい」と言った | 同じ記号でも、記号は別の文字として認識される |
furigana-markdown-it
以上で、VScodeで振り仮名を簡単に振れるようになる。
ただ、人によっては自作のMarkdownエディタにこの機能を取り込みたい人もいると思うので、npmパッケージについても説明する。
Git:iltrof/furigana-markdown-it: Furigana plugin for markdown-it
インストール
npm install furigana-markdown-it
JavaScriptファイルへの導入
const md = require("markdown-it")(),
furigana = require("furigana-markdown-it")();
md.use(furigana);
オプション
furigana-markdown-itにはオプションが存在し、require
する際に指定できる。
オプションは三つ。
const furigana = require("furigana-markdown-it")({
fallbackParens: "()",
extraSeparators: "-",
extraCombinators: "'"
});
fallbackParens
<ruby>
が使用できない環境で使用されるフォールバックのカッコを変えることができる。
デフォルトは【】
。
たとえば、[漢字]{かんじ}
と入力しても反映されないときは、自動で漢字【かんじ】
となる。この【】
を任意の記号に変えられる。
上記の設定では漢字(かんじ)
となる。
extraSeparators
振り仮名を振り分けることができる記号を指定できる。
デフォルトは..。・||//
。
上記の設定では[漢字]{かん-じ}
と書ける。
extraCombinators
特定の箇所の振り仮名を均等に振り分けるための記号を指定できる。
デフォルトは+
。
上記の設定では、[可愛い犬]{か'わい・いいぬ}
と書ける。