シン・マコ
2022.02.16

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

 
 
ダウンロードしてアップロードしてコード貼るだけ。

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

コードをキレイに色付け(highlight)する。

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

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

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

【highlight.js公式サイト】

    ダウンロードファイルは2つだけ。

  1. highlight.min.js
  2. styles/テーマ名.min.css(今回はmonokai-sublime.min.jsで説明。)

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

手順1 highlight.js公式サイト最新版のファイルをダウンロードし、2つのJSファイルを選択します。

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」をアップロード。

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

手順3 <head></head>内にコードを3つ書きます。

header.phpの<head></head>内に下記のコードを書きます。


<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>

テンプレートファイルに読み込むコードの<?php bloginfo("template_url");?>を忘れないようにしましょう。

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>

Profile
プロフィール
   
Popular
人気記事
Archive
アーカイブ
Twitter
ツイッター