react-markdown + remark-cjk-friendlyで日本語を太字変換

要点

• 日本語で書かれたMarkdownは、太字（**）と記号が連続したとき、react-markdownで太字変換されない場合がある
• remark-cjk-friendlyをプラグイン追加することで、意図通り太字変換されるようになる

事象と要因

react-markdownを含むMarkdown変換ライブラリでは、日本語を含む「分かち書きのない言語」の太字がうまく変換されない場合があります。

変換できるケース

Markdownにおいて、太字は次のような記法となっています。

前**太字**後

**で囲まれた範囲が太字となります。この場合は問題なく太字に変換されます。

変換できないケース

しかし**の直前に半角記号がある場合などでは、太字が変換されなくなります。

前**(太字)**後
前**(太字**)後
前(**太字)**後

要因

react-markdownは内部でremarkを利用しています。
remarkによるMarkdown解析は、CommonMarkの仕様に沿っています。

CommonMarkは、分かち書き（単語の間にスペースを入れる記法）のある言語を前提に作られています。英語などはこれにあたります。
日本語などの分かち書きがない言語においては、**と記号の位置関係によって意図した太字にならない挙動となります。

ちなみにこちらは変換できます。開始の**と終了の**の内部に記号がないためと思われます。

前(**太字**)後

解決法

remark-cjk-friendlyは、分かち書きのない言語においてもremarkで太字を意図通り動作させるライブラリです。
使い方は、react-markdownのコンポーネントにプラグイン追加するのみです。

<ReactMarkdown remarkPlugins={[remarkCjkFriendly]}>
  {children}
</ReactMarkdown>

これを使うことで、変換が可能となります。

前**(太字)**後
前**(太字**)後
前(**太字)**後