リアルタイムシンタックスハイライト

Question

前提・実現したいこと

cssを用い、入力したソースコードを
リアルタイムでシンタックスハイライトしたい。

試したこと

jsを用いキーボード入力する度にgoogle-code-pretifyというライブラリを適用する処理では、
バグが起きうまくいかなった

現在把握している解決法

cssでtransparentの透明化とz-indexを用いシンタックスハイライトした色を
重ね合わせるやり方でできることを確認している。
しかし具体的にどうやるかは忘れてしまった

英語版のサイトにそのようなものがあった。

補足情報（FW/ツールのバージョンなど）

os:mac
editor:vscode

Answer 1

シンタックスハイライトが行えるライブラリで有名どころだと CodeMirror や Ace Editor あたりでしょうか。

■ CodeMirror
https://codemirror.net/

■ Ace Editor
https://ace.c9.io/