quartz-research-note/content/シンタックスハイライト付きのエディタを簡易的に実装する.md

date
2024-12-23 11:23

#tips #scrap

How to add syntax highlighting to code as a user types in realtime with vanilla JavaScript | Go Make Things

Prismjsでハイライトしたエリアに、ぴったり同じサイズの透明なtextareaを重ねて、inputイベントで同期させる。

新しいmimiumのWebサイトのエディタで、Webコンポーネント作るまでの一時的な対処で使用中。なぜかtextareaの方にletter-spacing:-0.8pt;というマジックワード入れないとサイズが合わなかった

https://mimium.org