コードをハイライト表示できるようにする

2020年7月15日 WordPress

必要なファイル

必要なファイルをチェックを入れてDL
highlight.js

設置先

/js/highlight/highlight.pack.js
/js/highlight/styles/a11y-dark.css

wordpress側の追記

Appearance/Thema Editor/Header.php
head内に追記する。

<head>
<!-- ハイライト表示 -->
<link rel="stylesheet" href="/js/highlight/styles/a11y-dark.css">
<script src="/js/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- ハイライト表示ここまで -->

</head>

2023/06/07追記

一部のファイル名が変更されており、私の環境だとこのようになった。

echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/highlight/a11y-dark.min.css' . '">';
echo '<script src="' . get_template_directory_uri() . '/highlight/highlight.min.js' . '"></script>';
echo '<script>hljs.initHighlightingOnLoad();</script>' . "\n";