たった12行でWordPressサイトのコードをハイライトする方法

「WordPressサイトで、ソースコードを記事に入れたんだけど、色がつかなくて見にくい。ソースコードに色を付けてハイライトしたい。どうしたらいい？」

WordPressには、ソースコードに色を付ける機能がなく、そのままだとすごく見にくい。そこで、たった13行だけでWordPressサイトの記事内のソースコードをハイライトする方法を共有します。

プラグインをインストールする必要は一切ありません。WordPressを5年以上使ってきたエンジニアとして「軽量」かつ「安全」な方法を載せました。

たった12行でWordPressサイトのコードをハイライトする方法
1. ソースコード（たった12行）
2. このソースコードは軽量で安全です
コードのハイライトだけでなく、行番号も付けたい場合（14行）
1. ソースコード（たった14行）
2. ソースコードの説明
どうしてもWordPressプラグインでコードをハイライトしたい場合
1. きちんと更新されているプラグインを使おう
2. おすすめは「Highlighting Code Block」しかない
WordPressでソースコードをハイライトすると見やすくなる

たった12行でWordPressサイトのコードをハイライトする方法

テーマフォルダにあるfunctions.phpの最後の方に、次の12行を追加してください。

ソースコード（たった12行）

add_action( 'wp_head', 'add_highlightjs_stylesheet' );
add_action( 'wp_footer', 'add_highlightjs_script' );
function add_highlightjs_stylesheet() {
?>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<?php
}
function add_highlightjs_script() {
?>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script><script>hljs.highlightAll();</script>
<?php
}

functions.phpの編集方法はなんでも良く、

WordPressの管理画面の「テーマファイルエディター」から編集する
FTPでfunctions.phpをダウンロードし編集したあと、上書きアップロードする
レンタルサーバーのWebファイルマネージャー（WebFTP）などを使って編集する

などなど。本当にどれでも構いません。

なお、functions.phpのバックアップを取ってから作業するのがおすすめです。

このソースコードは軽量で安全です

このソースコードは、highlight.jsというソースコードをハイライトするためのツールを読み込むコードを追加しているだけです。

highlight.jsは、StackOverFlowという有名なプログラミング質問サイトでも使われている人気のあるJavaScriptライブラリで、多様なプログラミング言語のハイライトに対応しています。

サイトのデータベースへのアクセスやファイルの操作は全くなく、非常に軽量で安全です。

コードのハイライトだけでなく、行番号も付けたい場合（14行）

以上のコードだけでかんたんに、色を付けることができるようになります。

しかし、サイトによっては、「○行目のコードは〜」というように、行番号をつけて説明したい場合もあるでしょう。その場合は14行の次のコードが使えます。

ソースコード（たった14行）

add_action( 'wp_head', 'add_highlightjs_stylesheet' );
add_action( 'wp_footer', 'add_highlightjs_script' );
function add_highlightjs_stylesheet() {
?>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<?php
}
function add_highlightjs_script() {
?>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
<script>hljs.highlightAll();hljs.initLineNumbersOnLoad();</script>
<?php
}