tiptapのextensionでコードブロックにシンタックスハイライトを追加できるらしいのだが、結構めんどくさくて苦戦。

とりあえず、以下stackoverflowで、editorモードでのシンタックスハイライトが反映されることは確認した。

https://stackoverflow.com/questions/77573628/how-do-you-highlight-codeblock-with-tiptap

ただ、プレビュー画面だとシンタックスハイライトが当たらない。

ちなみに、tiptapのextensionに限らず、codeblockのsyntax highlightは一般的に<code>内の文字列を解析して、構文とし<span>タグに分解して、それに対してスタイを当てているみたいなことをしているっぽい。（code内の文字列を解析する方法は、それこそプログラミング言語の構文解析と同じ仕組みなはず）

code blockの背景の色は変わっているから、スタイルが効いていないわけではない。dev toolでプレビュー画面内<pre>の中身を見ると、テキストがダブルクオートで囲まれた文字列として入っていたから、これが原因ぽいな。

TODO

解決したら追記してまとめる

参考