highlight.js を使ってソースを見やすくする

highlight.js を使ってソースを見やすくする

ブログ記事内にソースを記載している箇所をハイライトさせて、見やすくしたいと思い、簡単にできる方法を調べました。

検証環境

  • WordPress 5.5.1
  • highlight.js 10.2.0

設定方法

header.php の</head>タグの直上に以下を追記

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/vs.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

highlight.js の公式ページはこちら。

highlight.jsは、189個の言語に対応しており、95個の表示テーマが用意されている。以下から、見た目や言語ごとの表示イメージが確認できる。

Web技術カテゴリの最新記事