【prism.js導入】WPブログで見やすく、コードハイライト表示する方法

prism.jsを導入しようとしている人（アイキャッチ画像） CSS
2020.04.26
この記事は約21分で読めます。

こんにちは、blです。

今回は、

「WordPressブログでコードをハイライトさせる、おすすめな方法 」

についてお答えしていきたいと思います。

この記事では下記の悩みを持った人に向けて書いています。

↓

プログラミング系記事を書こうとしてる男性
プログラミング系記事を書きたいマン🔰

WPブログで、プログラミング関連の記事を書きたいと思っています。
ですが、HTMLやCSS、Javascriptなどのコードをそのまま書くと、下記のように殺風景。

なので、ブラウザ上でコードをきれいに表示させたい…。
初心者ブロガーなので、くわしく・わかりやすい導入方法が知りたいな…。

この記事を読むと分かること。

  • ブログ記事内でのコードハイライトの仕方が分かる
  • 「prism.js」の導入方法が知れる


ブログ内でコードをきれいにさせる方法を紹介

きれいなシンタックスハイライトされたコード
プログラミング・webデザイン系の記事を書いていると、コードを見やすく表示させたいかと思います。
上記のことを、「コードハイライト」や「シンタックスハイライト（syntax highlight）」と言ったりします。

コードハイライトさせる方法は主に3つありまして、下記で上げてみました。

コードをハイライトさせる方法

  1. wordpressプラグイン
  2. JavaScriptライブラリ
  3. プレイグラウンド

大体この3つの方法がありますね。
それぞれの大まかな特徴と、どんな物があるか見ていきましょう。

１．WordPressプラグイン

特徴

◯導入が楽。
◯すぐ使える。
×WPが重くなる。
→サイトの速度を確認してみましょう（PageSpeed Insights）
×WPプラグインが多くなると、ハッキングされやすくなる。
→マナブさんの記事が分かりやすいです（WordPressのおすすめプラグインは８つだけ。断言します）

種類

※一応、1年以内で更新されているプラグインを載せておきます。

紹介しておきながらなんですが、どれも使ったことないですm(__)m。
WPプラグインを多く入れるのはデメリットでしかないので、使わないですね。

２．Javascriptライブラリ

特徴

◯アップロードするファイル自体は軽量。
◯拡張機能が豊富。
×ftpソフトを用いて、サーバーにアップロードする手間がある（一度だけ）。

種類

「prism.js」と「highlight.js」は導入していますが、「Google code-prettify」は使ったことないですね（事足りてるので…）。

３．プレイグラウンド

特徴

◯HTML、CSS、JavaScriptの結果を、プレビューウインドウで即時確認できる。
◯HTMLとか特殊文字に変換や、タグ付けの必要がない。
×個人情報の登録が必要（CodePenがそうでした）。
×上記３つの言語しか出来ない。
×埋め込みをWPに貼り付ける形になる（デメリットなのか謎だけど…）。

種類

プレイグラウンドは、プレビュー機能が便利すぎですね。

上記のように、たくさんコードハイライトさせるツールがあります…。
どれを使えばいいか悩むかもなので、私が使っているおすすめなコードハイライターを紹介します。

おすすめなコードハイライタ―は、「Prism.js」

GOODするシマシマ手
結論、私がおすすめするコードハイライタ―は、「Prism.js」でして、以下におススメな理由をまとめました。

「Prism.js」がおすすめな理由

  • ファイルが軽い！
  • 対応している言語が多い
  • 前後にタグを挿入するだけで、ハイライト可能
  • 拡張機能（プラグイン）が豊富
    →特定の行を強調できる。
    0-4 line highlightで行を強調表示

    →行番号を付けられる。
    0-5 行番号表示

    →何の言語化、表示可能
    0-6 何の言語かしめす

    →カラーコードの手前に小さなカラービューが見れる。
    0-7 小さなカラービュー

    →コピペボタンがつけられる。
    0-8 コピペボタン

上記のように、読者にgive的な要素が多く搭載されており、個人的にGOOD。

事項からは「私もPrism.jsを導入したい」と考えてる方に、導入の手順を紹介していきます。

「prism.js」の導入手順を紹介


今回は、「Cocoonテーマ」での導入方法を主体にしてまとめています。
他のテーマで「Prism.js」を導入した方の記事リンクも、手順の一番下に載せておきました。
>>課題

それでは手順を説明していきます。

Prism.jsのサイトからCSSとJSファイルをダウンロード

1．ホームページアクセス

Prism.js
1-1 prism.jsのホームページ

2．コードハイライトのデザインチェック

コードハイライトする デザインの仕様を決めましょう。
ここは自分の好みでいいかと思います。
おすすめは、サイトカラーと合わせるのがよさげです。
1-3 コードをハイライト表示するうえでの、デザインを決めましょう。

一応、デザインの一覧をのせておきますね。

コードハイライトのデザイン

※CSSとHTMLの表示状態を載せておきます。

DEFAULT（デフォルト）
1-4 DEFAULT（デフォルト）a
背景が灰色の見やすく、シンプルです。

DARK（ダーク）
1-5 DARK（ダーク）
背景が茶黒っぽい。コードは立体感ありな感じです。

FUNKY（ファンキー）
1-6 FUNKY（ファンキー）
コードはマーカー色強め。背景はボーダーラインです。

OKAIDIA（オカイディア）
1-7 OKAIDIA（オカイディア）
Sublime感がありますね。マナブログのコードハイライトに使われています。

TWILIGHT（トワイライト）
1-8 TWILIGHT（トワイライト）
背景が真っ黒で、コード色はハイライト弱め。

COY（内気）
1-9 COY（内気））
個人的には、ブログの色が青やオレンジの方に合うと思います。

SOLARIZED LIGHT（ソラリゼーションライト）
1-10 SOLARIZED LIGHT（ソラリゼーションライト）
背景はパステルカラー（柔らかピンク）。落ちついた色ですね。

TOMORROW NIGHT（明日の夜）
1-11 TOMORROW NIGHT（明日の夜）
背景は真っ黒だけど、コードには、識別しやすい色だと思う。

3．「DOWNLOAD」ボタンをクリック

テーマを選んだら、水色の「DOWNLOAD」ボタンをクリックしましょう。
1-2 テーマが決まったら、「ダウンロード」ボタンを押しましょう。

4．カスタマイズを行う

画面が変わり、色々カスタマイズできる項目がでてきます。

カスタマイズできる項目

  • 「Compression level」・・・圧縮レベルを決めます。
  • 「Themes」・・・コードハイライトするデザインの仕様
  • 「Languages」・・・ハイライトさせたい言語を選ぶ。
  • 「Plugins」・・・コードハイライトに色々な機能を付けられます

一つずつ見ていきましょう。

Compression levelコンプレッション レベル

  • Developmentデベロップメント version（開発バージョン）
  • Minifiedミニファイルドゥ version（圧縮フォルダーバージョン）

２つありますが、軽いほうの「Minified version」を選択。

Themes

1-13 Themesの選択
コードハイライトのデザイン（先ほど紹介）を決めます。
好きなやつを選びましょう。
私は「COY」にしておきます。

Languages

1-14 Languagesの選択
コードハイライトさせたい言語を選びます。
たくさんありすぎて萎えますが、web系の言語を技術記事にする場合、以下を選んで置きましょう。
「HTML、CSS、Javascript、PHP」あたりに☑
さらに、メジャーそうな言語も選択しておくのもあり。

Plugins

1-16 私が選ぶプラグイン一覧です
これもたくさんあって、分かりにくいですね。
簡単に、入れたほうが良さげのものだけ紹介しておきます。

  • Line Highlight：任意の行にハイライト
  • Line Numbers：行番号をつける
  • Show Language：ハイライトしている言語を表示
  • Inline color：小さなカラープレビューをつける
  • Copy to Clipboard Button：コピーボタンをつける
  • Match brances：ホバーした時に、対になる括弧をブロック表示

5．CSSファイルとJavascriptファイルをダウンロード

サイトの下の方に、CSSとJavascriptの「DOWNLOAD」ボタンがあるので、DLしましょう。
1-17 下の方にある、ダウンロードを２つをどっちも押してファイルをDLしましょう.

ダウンロードされたファイルは、以下のファイルです。
1-18 こんな感じでCSSファイルとjsファイルがdownloadされました

ファイルをサーバーにアップロード

「prism.css」と「prism.js」のファイルがダウンロードできたら、それらをアップロードする工程となります。

6．サーバーにアップロードする準備

ファイルをサーバー上にアップロードするには、FTPソフトを起動させましょう。
※今回は、「FileZilla」というフリーソフトでアップロードします。
※使い方は、下記リンクを参考にして下さい。
FTPソフト（FileZilla）の準備

7．「prism.css」と「prism.js」のファイルをまとめる

サーバ―に接続後、「prism.css」と「prism.js」のファイルを１つのフォルダー（prismフォルダー）にまとめておきます。
1-19 cssファイルとjsファイルを一つのフォルダーにまとめましょう

8．アップロードするディレクトリ（フォルダー）を開いておく

サーバー側は、

/自分のドメイン名/public_html/wp-content/themes/子テーマフォルダー

まで開きましょう。
1-20 子テーマのフォルダーまで開きましょう

たまに、「/自分のドメイン名/public_html/wp-content/」まで開いて「wp-content」のフォルダーにアップロードする方もいますが、プラグインが正しく作動しないので注意！！（経験済み）。

9．「prismフォルダー」をサーバー上にアップロード

ドラック＆ドロップで「prism」フォルダーを「子テーマフォルダー」（サーバー上）にアップロードします。
1-21 サーバー上に「prism」フォルダーをアップロードしましょう

サーバー上のファイルとWebページを関連付ける

注意

サーバーにファイルをアップロードしただけでは、読み込まれません。
アップロードしたファイルは、現時点では「ただの外部ファイルの状態」にあります。
なので、ファイルをwebページと関連付ける必要があります。

10．「CSSファイル」と「JSファイル」を関連付ける方法と記載場所

cssファイルと、jsファイルでは関連付ける方法は異なります（下記は概要です）。

  • CSSファイル→<link>タグ内にある、"href属性"で関連付ける。
  • JSファイル→<script>タグ内にある、"src属性"で関連付ける。

今回、関連付ける情報を記載する場所は、<head>～</head>内にしようと思います。

解説
<head>～</head>内で記載する情報とは？
  • webページと外部ファイルをリンクさせたり→<link>タグ
  • ブラウザに知らせたいことを書いたり→<meta>タグ

参考：サルワカさんがとても詳しいです。
→head内に書くべきタグを総まとめ：SEO対策に有効なものは？

※javascriptファイルは、<body>～</body>の「</body>の直前」に<script>～</script>を入れて、読み込ませる方法もあります。
ですが毎回記載するのは手間なので、<head>～</head>内に記載します。

上記の情報をまとめると下記です。

  • CSSファイル（prism.css）→<head>～</head>内に<link rel="" href="">を書き込む。
  • Javascriptファイル（prism.js）→<head>～</head>内に<script src="">～</script>を書き込む。

11．子テーマ内で<head>～</head>を反映しているエディタを開く

ワードプレスはCMSなので、web上から「関連付けたい情報」の記載ができる。

解説
CMSとは？

ワードプレスを開き管理画面から、「➀外観 > ➁テーマエディタ」をクリック。
1-22 ワードプレスを開き管理画面から、「外観」→「テーマエディタ」をクリックし、開きましょう。

次に開くべき場所は、テーマによって異なるかと思います。
以降では、「Cocoonテーマ」を中心に説明しています<(_ _)>

「Cocoonテーマ」の場合（私）

「Cocoon child」にある、「head-insert.php 」というファイルエディタを開きましょう。

※たどり方
「Cocoon child > tmp-user > head-insert.php 」
1-23 Cocoon Child head-insert.php のエディタを開きましょう

他のテーマの場合

基本的に子テーマ内で<head>～</head>が書けるファイルエディタがあると思います。そちら探して、開きましょう。
子テーマ内に「header.php」があれば、そちらに<head>～</head>があると思います。

12．関連付ける情報を記載する

次に下記の<link>と<script>～</script>をコピーして、<head>～</head>内に貼り付ける。

実際に記載した情報も含め、添付しておきます。

prism.cssと関連付ける情報


<link rel="stylesheet" href="../../wp-content/themes/子テーマフォルダー/prism/prism.css">

※Cocoonテーマだと下記（私の場合）


<link rel="stylesheet" href="../../wp-content/themes/cocoon-child-master/prism/prism.css">

prism.jsのスクリプトタグ


<script type="text/javascript" src="../../wp-content/themes/子テーマ/prism/prism.js"></script>

※Cocoonテーマだと下記（私の場合）


<script type="text/javascript" src="../../wp-content/themes/cocoon-child-master/prism/prism.js"></script>

※Cocoonテーマの方は、2つとも「head-insert.php 」の最後らへんに貼り付けましょう。

1-25 Cocoonテーマなら、「head-insert.php」に貼り付けましょう

※他のテーマの方は、「</head>」の直前に貼り付けましょう。

※prism.jsのハイライト効果を記事別に、効くようにしたい場合（a記事は効く、ｂ記事は効かないとか）。
「prism.jsのスクリプトタグ」を記事投稿するエディタ内の、一番最後に貼り付ければOK。
（このときは<head>～</head>に「prism.jsのスクリプトタグ」は、貼らなくてOK。）
1-24 記事別に「prism.js」を聞かせたい場合

ファイルエディタに関連情報を記載した後、を押します。

コードハイライトさせるコードにタグ付け～確認

コードハイライトさせたいソースコードに、タグをつける作業になります。

13．コードハイライトしたい記事を開く

WPの管理画面 > 投稿 > 投稿一覧 > コードハイライトさせる記事を開きましょう。

また、エディタ表示を「テキストモード」にしておきましょう。
2-21 テキストモードにしましょう。

それでは、下記の例を参照してタグを付けましょう。

14．コードにタグを付ける

HTML、CSSを例に見ていきましょう。

HTML

例）<p class="aka"><i class="fas fa-check-circle"></i>項目１</p>

こちらをブラウザ表示する場合は、まず特殊文字（&lt;や&gt;や&quot;など）に変換する必要があります。
※「<」や「>」はブラウザ上では、タグと認識されてしまい、表示されませんので。

私は、HTML特殊文字変換ツールを使って変換しています。

上記コードを特殊文字に変換すると、

&lt;p class=&quot;aka&quot;&gt;&lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt;項目１&lt;/p&gt;

上記の通りです（特殊文字は赤で示しています）。

次に「prism.js」でハイライト表示するために、下記のようにタグで囲みます。

<pre class="line-numbers"><code class="language-markup">
&lt;p class=&quot;aka&quot;&gt;&lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt;項目１&lt;/p&gt;
</code></pre>

※「<code class="language-〇〇">」の「〇〇」部分は、「markup」と入力しましょう。
「HTML」はマークアップ言語なので「markup」ですね。

これでようやくハイライト表示されます。

ブラウザ表示


<p class="aka"><i class="fas fa-check-circle"></i>項目１</p>

続いてCSSも見ていきましょう。

CSS

例）

/*眉をひそめたアイコン*/
i.fa-frown{
font-family: "Font Awesome 5 Free";
content: "\f118";/*Unicode*/
padding-right: 5px;
font-weight: 900;
color: #ff0055; /*アイコンの色*/
}

特殊文字に変換するのは、「HTML」だけのようです（CSSにも「"」あるけど）。
CSSも同様のタグで囲みましょう。

<pre class="line-numbers"><code class="language-css">
/*眉をひそめたアイコン*/
i.fa-frown{
font-family: "Font Awesome 5 Free";
content: "\f118";/*Unicode*/
padding-right: 5px;
font-weight: 900;
color: #ff0055; /*アイコンの色*/
}
</code></pre>

※これはCSSなので、「<code class="language-〇〇">」の、「〇〇」部分を「css」と入力しましょう。

ブラウザ表示


/*眉をひそめたアイコン*/
i.fa-frown{
    font-family: "Font Awesome 5 Free";
    content: "\f118"; /*Unicode*/
    padding-right: 5px; 
    font-weight: 900;
    color: #ff0055; /*アイコンの色*/
}

こんな感じになります。

よって、基本的に以下のようにタグ付けすればOK

  • <pre class="line-numbers"><code class="language-◯◯">ここにコードが来る</code></pre>で囲めばOKです。
  • ◯◯の所は、言語名を入れましょう。

※Cocoonテーマの既存コードハイライトをOFFにする

※大して影響がないならやる必要は、ないかもです。

「Cocoonテーマ」には、既存の「highlight.js」というJavascriptライブラリーが入っています。
もしかすると、コードハイライター同士が競合するかもなので、下記にしておきましょう。

  • 特殊文字に変換する（HTMLのみ）
  • 「☑ソースコードをハイライト表示」の☑を外す。
  • 「☑行番号表示」の☑を外す。

1-26 Cocoonの方は、「Cocoon 設定」→「コード」で「ソースコード設定」まで開きます
1-27 念のため、「ソースコードをハイライト表示」の✓と、「行番号表示」の✓をはずしておきましょう.

課題

「prism.js」でコードハイライトしてみて、1行目がどうしても空き、2行目からコードが始まる点(pcのみ)。
1-28 1行目が空く、課題
原因不明なので、分かり次第修正する予定です。

参考サイト

「Prism.jsの導入手順」に戻る

まとめ＆手こずってこと

頭を抱えてる男性（つまづいてる）
詳しく解説したつもりですが、簡単な「Prism.js」の導入手順を示すと下記です。

簡単な導入手順まとめ

  1. 「Prism.js」のサイトへ行き、「cssファイル」と「jsファイル」をダウンロード。
  2. 「cssファイル」と「jsファイル」をサーバー上の「子テーマフォルダー」の箇所へアップロード。
  3. <head>～</head>に反映している子テーマファイルエディタに、<link>と<script>～</script>を書き込む。
  4. コードハイライトさせるコードを、<pre class="line-numbers"><code class="language-◯◯">ここにコードが来る</code></pre>で囲む。

    5. そして、プレビューを確認して完了ですね。

導入でつまづくかもなので、「私が手こずったこと」をまとめておきます。

私が「Prism.js」の導入で手こずった箇所

手こずり➀

関連付ける際の"href属性"と"src属性"にある、「パス」の書き方
今回は、

  • 「"../../wp-content/themes/cocoon-child-master/prism/prism.css"」
  • 「"../../wp-content/themes/cocoon-child-master/prism/prism.js"」

と書きました。

※青字の部分は皆共通です。
もしかしたら、これでも関連付けできない場合もあるかもです。その時は、「"../../」の箇所をいじったりしてみてください。また、課題の参考記事を見てください🙇

手こずり➁

関連付ける位置を一致させる。

  • ファイルをアップロードする箇所（子テーマフォルダー）
  • 関連付ける情報の記載場所（子テーマの<head>～</head>）

上記は同じ子テーマでなるべく合わせたほうがいいですね。
でないと、一部のプラグインが正しく働かなかったですね。

大変長くなりすみませんm(__)m。最後まで読んでいただきありがとうございます。
皆さんもコードハイライトできれいに表示して、読者さんに見やすく・分かりやすく伝えていきましょう
ヾ(￣▽￣) Bye~Bye~

コメント