【WordPress】コードに色付けして表示したい！highlight.jsの実装方法。

 

コードに色付けしてみたいけどどうやったらいいのかわからない。
プラグイン入れるべきか、でも重くなりそうだなー。簡単に実装したいなー。自作テーマだけどどうすればいいんだろう。
そういう方、見ていってください。

コードをキレイに色付け（highlight）する。

このページではダウンロードして使う方法を解説します。

参考にしたサイト【コードを綺麗にハイライトする！highlight.jsの使い方！】2019.10.23

参考記事が少し古かったので、この記事では2022年度版として簡単に解説します。

【highlight.js公式サイト】

手順解説

1. highlight.js公式サイト最新版のファイルをダウンロードし、2つのJSファイルを選択します。
2. レンタルサーバーのファイルマネージャーを開き、「highlight」新規ファイルを作り上記ダウンロードしたファイルを入れます。
3. head内にコードを3つ書きます。

ダウンロードファイルは2つだけ。
1. highlight.min.js
2. styles/テーマ名.min.css（今回はmonokai-sublime.min.jsで説明。）

stylesのテーマはいろいろあるんですが、一般的に使われてるのがmonokai-sublimeです。

highlight.js公式サイトを開きます。

赤枠チェックを確認しダウンロード。

zipファイルでダウンロードされるので展開しましょう。

「highlight.min.js」を確認。

「monokai-sublime.min.js」を確認。

手順2　レンタルサーバーのファイルマネージャーを開き、「highlight」新規ファイルを作り上記ダウンロードしたファイルを入れます。

Xserverの場合で解説していきます。

ファイル管理から始めます。

自分のドメイン。「okane8376.com」をクリック。

「public_html」をクリック。

「wp_content」をクリック。

「themes」をクリック。

新規ファイル「highlight」を作成。

ダウンロードした「highlight.min.js」「monokai-sublime.min.js」をアップロード。

ドラッグアンドドロップで簡単に入れられます。

<link rel="stylesheet" href="<?php bloginfo("template_url");?>/highlight/monokai-sublime.min.css">
<script src="<?php bloginfo("template_url");?>/highlight/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

highlight.min.jsの使い方

色付け（highlight）したい部分を<pre><code></code></pre>で囲みましょう。

例

<pre><code>
.selector {
  display: block;
  margin: 20px;
}
</code></pre>

言語名の指定方法。

言語名を入力するとエラーが改善されることがあります。
→code class="言語名"で指定。（小文字）
classに言語名を指定することで、その言語で色付け（highlight）できます。

例

<pre><code class="css">
/* CSSのスタイル */
</code></pre>