CodeMirrorで日本語エディタを作る

2026-03-20T00:00:00.000Z


拙作「MirrorShard」および「MirrorShard 2」は、エディタライブラリとしてCodeMirror 6を採用している。実績が豊富で信頼性も高く、巨大テキストの扱いにも強い優秀なライブラリなのだが、本質的には英語圏で生まれたコードエディタである。日本語で文章を書くのに使うには、注意しなければならない点がある。

縦書き

まず、CodeMirrorは現状、日本語の縦書きに対応できていない。Gemini君にも釘を刺されていたので、これに関してはさっさと諦めた。

代わりにhtmlを使った縦書きプレビューを実装したのだが、これは「メインから送られたテキストを行ごとに分割してidとスタイルつきのspanで囲む」という実装をしている。下記の要領だ。

<span id="line-10" class="preview-line">まず、CodeMirrorは現状、日本語の縦書きに対応できていない。Gemini君にも釘を刺されていたので、これに関してはさっさと諦めた。</span>
<br>
<span id="line-11" class="preview-line"> </span>
<br>
<span id="line-12" class="preview-line">代わりにhtmlを使った縦書きプレビューを実装したのだが、これは「行ごとに分割してidとスタイルつきのspanで囲む」という実装をしている。</span><br>

こっちの方向で頑張れば、縦書きで書けるエディタができたのかもしれない。ただ、数十万行以上の巨大テキストを扱うには、この実装ではさすがに無理があったので諦めた。私にとってはそちらの方が重要だったのだ。

オートインデント

問題は他にもある。CodeMirrorは、普通に実装するとオートインデントが有効になってしまうのだ。

オートインデントはコードを書くときには便利なのだが、日本語の段落システムとは致命的に相性が悪い。段落冒頭の字下げをすると、次の行も勝手にインデントされてしまうからである。ちなみに、Obsidianがオートインデントを切れないのも同じ理由(あれもCodeMirrorを採用している)だ。

あれこれ試してみると、どうやらCodeMirrorのdefaultKeymap⁠そのものにオートインデントが含まれているらしい。したがってdefaultKeymapの採用をやめ、必要な機能を個別に実装すればいいらしい、ということに気付いて、ここはまあどうにかなった。

  ※

しかしそうしたいくつかの厄介事はあるものの、高速で軽量な上に拡張性の高いCodeMirrorは、極めて優秀なエディタライブラリである。これがなければ、MirrorShardは今の形にはなっていなかったであろう。

一覧に戻る