見出し画像

ルビ機能を実装しよう(+note裏技)

ルビ機能の実装(JavaScript)

formated = text.replace(/(.+?)(.+?)/g, '<ruby class="ruby">$1<rt>$2</rt></ruby>');

 なろうフォーマットのルビ実装方法です。最近noteに導入されたものと同じです。

 昔、作ったコードから引用。一行で実装可能。githubにおいてある。ただ、正規表現の性質上、改行で行分割して行単位で処理しないと遅くなるはず。

  .+? (一回以上の最短一致)を指定しないとルビが二回以上出てくると挙動が予測外になる。

 中身は<ruby>タグに置換するだけ。

 ただnoteの場合、エディタ側のテキスト修飾とバッティングする(強調とリンクしかないけど)、強調とリンクを分割してから処理しないと挙動がおかしくなるはず。

 ――と言うかこの機能バグってね?codeの中でもルビ置換を行っている。

表示したいモノ

スクリーンショット 2021-10-06 093935

表示されているモノ

スクリーンショット 2021-10-06 094055

 これを正規表現を使わず実装すると滅茶滅茶面倒。最初にBNFで文法定義からやらないと行けない。

 IT技術者は、チョムスキーの生成文法の影響から逃れられないのだった。

+note裏技

改行裏技

 通常のENTERが改段落で、SHIFT+ENTERで、ただの改行になる。この仕様、書いてある場所が未だに見つからない(Windowsの仕様っぽいけど)。この裏技発見するまで、段落変えずに改行するのにいちいちコピー&ペースト使わないと行けなかった。
※ この行はSHIFT+ENTER

※ この行はただのENTER

 codeにするとこの仕様が変わる。ENTERでもSHIFT+ENTERでも改行になる。その所為でcodeから抜けられない……。codeを一旦解除して次の段落生成してから、codeに戻さないと行けない。

Excel裏技

 本note、時々表を貼り付けていますが、Excelから範囲コピーして貼り付けているだけです。なぜか勝手に画像に変換されている。ホントは表組みして欲しいところですが。Wordの表は変換されずベタテキストになる。リッチテキストを貼り付けたときにTableを検出したときの仕様でもないらしい。この場合もベタテキストになる。そうするとExcelの機能かも知れない。バージョンで挙動が変わりそう(家のExcelはMicrosoft365)


この記事が気に入ったらサポートをしてみませんか?