1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

highlight.jsを動的に使ってみた - CodePen

Last updated at Posted at 2020-11-08

まえがき

最終的にやりたいこと:コーディングの様子を動画っぽく表示したい。コードはシンタックスハイライトしたい。(先は長そう(?))
できたっ → ハッカーっぽいやつ作ってみた ~ コーディングを記録して動画風に再生する - Qiita

今回やったこと:ユーザが入力しているコードにシンタックスハイライトを適用して表示する。(入力用の領域とは別の領域に表示する。)

やってみた

See the Pen DynamicCodeHighlight by kob58im (@kob58im) on CodePen.

version 9.15.10を使用しましたが、現時点(2020.11.8)ではversion 10.1.2が最新のようです。

スタイルを変えたい場合

スタイルを変更したい場合は、参考サイトの2(※バージョンは適宜選択して変更ください)から探して、
image.png
「Copy Link Tag」をクリックして得られたHTMLのタグ(linkタグ)を埋め込む(置き換える)と変更できます。

参考サイト

  1. コードのハイライト表示用 JS ライブラリ highlight.js の使い方 - Qiita
  2. highlight.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?