こんにちは、blです。
今回は、
「WordPressブログでコードをハイライトさせる、おすすめな方法 」
についてお答えしていきたいと思います。
この記事では下記の悩みを持った人に向けて書いています。
↓

WPブログで、プログラミング関連の記事を書きたいと思っています。
ですが、HTMLやCSS、Javascriptなどのコードをそのまま書くと、下記のように殺風景。
なので、ブラウザ上でコードをきれいに表示させたい…。
初心者ブロガーなので、くわしく・わかりやすい導入方法が知りたいな…。
この記事を読むと分かること。
- ブログ記事内でのコードハイライトの仕方が分かる
- 「prism.js」の導入方法が知れる
ブログ内でコードをきれいにさせる方法を紹介
プログラミング・webデザイン系の記事を書いていると、コードを見やすく表示させたいかと思います。
上記のことを、「コードハイライト」や「シンタックスハイライト(syntax highlight)」と言ったりします。
コードハイライトさせる方法は主に3つありまして、下記で上げてみました。
コードをハイライトさせる方法
- wordpressプラグイン
- JavaScriptライブラリ
- プレイグラウンド
大体この3つの方法がありますね。
それぞれの大まかな特徴と、どんな物があるか見ていきましょう。
1.WordPressプラグイン
特徴
◯導入が楽。
◯すぐ使える。
×WPが重くなる。
→サイトの速度を確認してみましょう(PageSpeed Insights)
×WPプラグインが多くなると、ハッキングされやすくなる。
→マナブさんの記事が分かりやすいです(WordPressのおすすめプラグインは8つだけ。断言します)
種類
※一応、1年以内で更新されているプラグインを載せておきます。
- 1-1 Code Prettify
Code Prettify – WordPress プラグイン - 1-2 CC-Syntax-Highlight
CC-Syntax-Highlight – WordPress プラグイン - 1-3 Enlighter – Customizable Syntax Highlighter
Enlighter – Customizable Syntax Highlighter – WordPress プラグイン - 1-4 My Syntax Highlighter
My Syntax Highlighter – WordPress プラグイン - 1-5 Prismatic
Prismatic – WordPress プラグイン - 1-6 WP-GeSHi-Highlight — rock-solid syntax highlighting for 259 languages
WP-GeSHi-Highlight — rock-solid syntax highlighting for 259 languages - 1-7 Code Syntax Block
Code Syntax Block – WordPress plugin
紹介しておきながらなんですが、どれも使ったことないですm(__)m。
WPプラグインを多く入れるのはデメリットでしかないので、使わないですね。
2.Javascriptライブラリ
特徴
◯アップロードするファイル自体は軽量。
◯拡張機能が豊富。
×ftpソフトを用いて、サーバーにアップロードする手間がある(一度だけ)。
種類
- 2-1 prism.js
Prism.js - 2-2 highlight.js
highlight.js - 2-3 Google code-prettify
Google Code-Prettify シンタックスハイライト
「prism.js」と「highlight.js」は導入していますが、「Google code-prettify」は使ったことないですね(事足りてるので…)。
3.プレイグラウンド
特徴
◯HTML、CSS、JavaScriptの結果を、プレビューウインドウで即時確認できる。
◯HTMLとか特殊文字に変換や、タグ付けの必要がない。
×個人情報の登録が必要(CodePenがそうでした)。
×上記3つの言語しか出来ない。
×埋め込みをWPに貼り付ける形になる(デメリットなのか謎だけど…)。
種類
- 3-1 CodePen
CodePen: Build, Test, and Discover Front-end Code.「CodePen」の使い方↓
CodePenの使い方(知らない人向け)実際、登録してブログに貼るとこんな感じになりました↓。
- 3-2 JSFiddle
JSFiddle – Code Playground - 3-3 Dabblet
The first commented line is your dabblet’s title ✿ dabblet.com - 3-4 Liveweave
Liveweave: HTML, CSS and JavaScript demo
プレイグラウンドは、プレビュー機能が便利すぎですね。
上記のように、たくさんコードハイライトさせるツールがあります…。
どれを使えばいいか悩むかもなので、私が使っているおすすめなコードハイライターを紹介します。
おすすめなコードハイライタ―は、「Prism.js」
結論、私がおすすめするコードハイライタ―は、「Prism.js」でして、以下におススメな理由をまとめました。
「Prism.js」がおすすめな理由
上記のように、読者にgive的な要素が多く搭載されており、個人的にGOOD。
事項からは「私もPrism.jsを導入したい」と考えてる方に、導入の手順を紹介していきます。
「prism.js」の導入手順を紹介
今回は、「Cocoonテーマ」での導入方法を主体にしてまとめています。
他のテーマで「Prism.js」を導入した方の記事リンクも、手順の一番下に載せておきました。
>>課題
それでは手順を説明していきます。
Prism.jsのサイトからCSSとJSファイルをダウンロード
1.ホームページアクセス
2.コードハイライトのデザインチェック
コードハイライトする デザインの仕様を決めましょう。
ここは自分の好みでいいかと思います。
おすすめは、サイトカラーと合わせるのがよさげです。
一応、デザインの一覧をのせておきますね。
※CSSとHTMLの表示状態を載せておきます。
DEFAULT(デフォルト)
背景が灰色の見やすく、シンプルです。
DARK(ダーク)
背景が茶黒っぽい。コードは立体感ありな感じです。
FUNKY(ファンキー)
コードはマーカー色強め。背景はボーダーラインです。
OKAIDIA(オカイディア)
Sublime感がありますね。マナブログのコードハイライトに使われています。
TWILIGHT(トワイライト)
背景が真っ黒で、コード色はハイライト弱め。
COY(内気)
)
個人的には、ブログの色が青やオレンジの方に合うと思います。
3.「DOWNLOAD」ボタンをクリック
テーマを選んだら、水色の「DOWNLOAD」ボタンをクリックしましょう。
4.カスタマイズを行う
画面が変わり、色々カスタマイズできる項目がでてきます。
カスタマイズできる項目
- 「Compression level」・・・圧縮レベルを決めます。
- 「Themes」・・・コードハイライトするデザインの仕様
- 「Languages」・・・ハイライトさせたい言語を選ぶ。
- 「Plugins」・・・コードハイライトに色々な機能を付けられます
一つずつ見ていきましょう。
Compression level
- Development version(開発バージョン)
- Minified version(圧縮フォルダーバージョン)
2つありますが、軽いほうの「Minified version」を選択。
Themes
コードハイライトのデザイン(先ほど紹介)を決めます。
好きなやつを選びましょう。
私は「COY」にしておきます。
Languages
コードハイライトさせたい言語を選びます。
たくさんありすぎて萎えますが、web系の言語を技術記事にする場合、以下を選んで置きましょう。
「HTML、CSS、Javascript、PHP」あたりに☑
さらに、メジャーそうな言語も選択しておくのもあり。
Plugins
これもたくさんあって、分かりにくいですね。
簡単に、入れたほうが良さげのものだけ紹介しておきます。
- Line Highlight:任意の行にハイライト
- Line Numbers:行番号をつける
- Show Language:ハイライトしている言語を表示
- Inline color:小さなカラープレビューをつける
- Copy to Clipboard Button:コピーボタンをつける
- Match brances:ホバーした時に、対になる括弧をブロック表示
5.CSSファイルとJavascriptファイルをダウンロード
サイトの下の方に、CSSとJavascriptの「DOWNLOAD」ボタンがあるので、DLしましょう。
ファイルをサーバーにアップロード
「prism.css」と「prism.js」のファイルがダウンロードできたら、それらをアップロードする工程となります。
6.サーバーにアップロードする準備
ファイルをサーバー上にアップロードするには、FTPソフトを起動させましょう。
※今回は、「FileZilla」というフリーソフトでアップロードします。
※使い方は、下記リンクを参考にして下さい。
FTPソフト(FileZilla)の準備
7.「prism.css」と「prism.js」のファイルをまとめる
サーバ―に接続後、「prism.css」と「prism.js」のファイルを1つのフォルダー(prismフォルダー)にまとめておきます。
8.アップロードするディレクトリ(フォルダー)を開いておく
サーバー側は、
たまに、「/自分のドメイン名/public_html/wp-content/」まで開いて「wp-content」のフォルダーにアップロードする方もいますが、プラグインが正しく作動しないので注意!!(経験済み)。
9.「prismフォルダー」をサーバー上にアップロード
ドラック&ドロップで「prism」フォルダーを「子テーマフォルダー」(サーバー上)にアップロードします。
サーバー上のファイルとWebページを関連付ける
サーバーにファイルをアップロードしただけでは、読み込まれません。
アップロードしたファイルは、現時点では「ただの外部ファイルの状態」にあります。
なので、ファイルをwebページと関連付ける必要があります。
10.「CSSファイル」と「JSファイル」を関連付ける方法と記載場所
cssファイルと、jsファイルでは関連付ける方法は異なります(下記は概要です)。
- CSSファイル→
<link>
タグ内にある、"href属性"で関連付ける。 - JSファイル→
<script>
タグ内にある、"src属性"で関連付ける。
今回、関連付ける情報を記載する場所は、<head>
~</head>
内にしようと思います。
- <head>~</head>内で記載する情報とは?
-
- webページと外部ファイルをリンクさせたり→
<link>
タグ - ブラウザに知らせたいことを書いたり→
<meta>
タグ
参考:サルワカさんがとても詳しいです。
→head内に書くべきタグを総まとめ:SEO対策に有効なものは? - webページと外部ファイルをリンクさせたり→
※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とは?
ワードプレスを開き管理画面から、「➀外観 > ➁テーマエディタ」をクリック。
次に開くべき場所は、テーマによって異なるかと思います。
以降では、「Cocoonテーマ」を中心に説明しています<(_ _)>
「Cocoonテーマ」の場合(私)
「Cocoon child」にある、「head-insert.php 」というファイルエディタを開きましょう。
※たどり方
「Cocoon child > tmp-user > 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 」の最後らへんに貼り付けましょう。
※他のテーマの方は、「</head>
」の直前に貼り付けましょう。
※prism.jsのハイライト効果を記事別に、効くようにしたい場合(a記事は効く、b記事は効かないとか)。
「prism.jsのスクリプトタグ」を記事投稿するエディタ内の、一番最後に貼り付ければOK。
(このときは<head>
~</head>
に「prism.jsのスクリプトタグ」は、貼らなくてOK。)
ファイルエディタに関連情報を記載した後、を押します。
コードハイライトさせるコードにタグ付け~確認
コードハイライトさせたいソースコードに、タグをつける作業になります。
13.コードハイライトしたい記事を開く
WPの管理画面 > 投稿 > 投稿一覧 > コードハイライトさせる記事を開きましょう。
また、エディタ表示を「テキストモード」にしておきましょう。
それでは、下記の例を参照してタグを付けましょう。
14.コードにタグを付ける
HTML、CSSを例に見ていきましょう。
HTML
例)<p class="aka"><i class="fas fa-check-circle"></i>項目1</p>
こちらをブラウザ表示する場合は、まず特殊文字(<や>や"など)に変換する必要があります。
※「<」や「>」はブラウザ上では、タグと認識されてしまい、表示されませんので。
私は、HTML特殊文字変換ツールを使って変換しています。
上記コードを特殊文字に変換すると、
上記の通りです(特殊文字は赤で示しています)。
次に「prism.js」でハイライト表示するために、下記のようにタグで囲みます。
<p class="aka"><i class="fas fa-check-circle"></i>項目1</p>
</code></pre>
※「<code class="language-〇〇">」の「〇〇」部分は、「markup」と入力しましょう。
「HTML」はマークアップ言語なので「markup」ですね。
これでようやくハイライト表示されます。
ブラウザ表示
<p class="aka"><i class="fas fa-check-circle"></i>項目1</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も同様のタグで囲みましょう。
/*眉をひそめたアイコン*/
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のみ)
- 「☑ソースコードをハイライト表示」の☑を外す。
- 「☑行番号表示」の☑を外す。
課題
「prism.js」でコードハイライトしてみて、1行目がどうしても空き、2行目からコードが始まる点(pcのみ)。
原因不明なので、分かり次第修正する予定です。
参考サイト
- 【WordPress】シンタックスハイライター「Prism.js」を導入する方法
- [JavaScript] Prismの使い方|シンタックスハイライト
- プラグインを使わずにソースコードを綺麗に表示!Prism.jsを使ってみた!
- How To Implement Prism.js Syntax Highlighting Into Your WordPress Site
まとめ&手こずってこと
詳しく解説したつもりですが、簡単な「Prism.js」の導入手順を示すと下記です。
簡単な導入手順まとめ
- 「Prism.js」のサイトへ行き、「cssファイル」と「jsファイル」をダウンロード。
- 「cssファイル」と「jsファイル」をサーバー上の「子テーマフォルダー」の箇所へアップロード。
<head>
~</head>
に反映している子テーマファイルエディタに、<link>
と<script>
~</script>
を書き込む。- コードハイライトさせるコードを、<pre class="line-numbers"><code class="language-◯◯">ここにコードが来る</code></pre>で囲む。
そして、プレビューを確認して完了ですね。
導入でつまづくかもなので、「私が手こずったこと」をまとめておきます。
私が「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~
コメント