WP Code Highlight.jsの賢い使い方を紹介（ローカル化・クイックタグ作成）

当サイトはソースの表示に「WP Code Highlight.js」を使っています。
これはプラグインですが、個別にファイルをアップロードして使う方法もあります。
そちらの方が絶対に良いので、やり方を紹介。

１、公式HPからダウンロード

こちらの公式HPを開いてください。
「https://highlightjs.org/」

「Get version 9.12.0」といったボタンがありますのでクリックします。
次に自分が使うプログラム名にだけチェックを入れて、ダウンロードします。

２、サーバーへアップロード

「highlight.pack.js」と好みのCSS（agate.cssなど）をサーバーへアップロードします。
ディレクトリ直下かテーマのディレクトリが良い。

３、header.phpに記載

「header.php」の<head></head>内に次のようにコードを追加します。
※ホームディレクトリ直下にアップロードした場合
※「script」はBODY内でもOK


<link rel="stylesheet" href="agate.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

これで「WP Code Highlight.js」の設定は完了です。

４、使い方

記事作成ページのテキストモードにて、
ソースを「<pre><code>～</code></pre>」で囲みます。

<pre><code>
<link rel="stylesheet" href="agate.css">
<script src="highlight.pack.js"></script>
</code></pre>

次のように「class=”html”」とプログラム名を指定しても良い。
指定しない場合、自動的に最適なものが適応されますが、
時々間違っているので、指定するのが無難。

<pre><code class="html">
<link rel="stylesheet" href="agate.css">
<script src="highlight.pack.js"></script>
</code></pre>

HTMLコードを表示させたい場合、HTMLエンコードが必要です。
ビジュアルモードにて貼り付けて、テキストモードにすると自動的にエンコードしてくれるので、
そうしてエンコードされた状態で「<pre><code>」で囲みます。

５、完璧な使い方

クイックタグを作成し、１クリックで囲めるようにしたい。

ワードプレスのクイックタグ説明

functions.phpに次のコードを追加します。

<?php
function appthemes_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'precode', 'precode', '<pre><code>', '</code></pre>' );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
?>

これを追加すると、記事作成画面のテキストモード時に、
「precode」というクイックタグが表示されます。
これで１クリック化完了。

ソース表示としてはとても軽くて使いやすい。
機能性は劣りますが、簡単に表示したいだけならおすすめできるプラグインです。

プラグインとしてインストールしてCDNにすると、
プラグインのサービスが終了したら表示されなくなるリスクがあります。
こうしてローカル（自分のサーバー）に保存して使うのが絶対に良い。