WordPress等のWysiwygに対応したSyntax Highlightの実装(コードのシンタックスハイライト表示)

[ ID : 3399 ]
シルバー
WordPress等のWysiwygに対応したSyntax Highlightの実装(コードのシンタックスハイライト表示)

概要

【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使用。

実装方法

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録