まえがき
最終的にやりたいこと:コーディングの様子を動画っぽく表示したい。コードはシンタックスハイライトしたい。(先は長そう(?))
できたっ → ハッカーっぽいやつ作ってみた ~ コーディングを記録して動画風に再生する - Qiita
今回やったこと:ユーザが入力しているコードにシンタックスハイライトを適用して表示する。(入力用の領域とは別の領域に表示する。)
やってみた
See the Pen DynamicCodeHighlight by kob58im (@kob58im) on CodePen.
version 9.15.10を使用しましたが、現時点(2020.11.8)ではversion 10.1.2が最新のようです。
スタイルを変えたい場合
スタイルを変更したい場合は、参考サイトの2(※バージョンは適宜選択して変更ください)から探して、
「Copy Link Tag」をクリックして得られたHTMLのタグ(link
タグ)を埋め込む(置き換える)と変更できます。