概要
【Vanilla JS】webページでコード説明などを直接記述したい場合に重宝するシンタックスハイライター(Wysiwyg対応)の紹介について。用途・要件
- Wysiwyg対応のSyntax Highlight表示の実装について。
- HTMLなどのソースをシンタックスハイライト表示させます。
- Highlight.jsを使用。
- 表示させたいソースを<pre><code>〜</code></pre>で囲ってください。
- HTMLは改行しないように配置してください。
- 表示させるソースはエスケープ(エンティティ化)して配置してください。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
その他
- highlight.js v11.4.0使用。
実装方法
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)