新WordPressテーマ「THE THOR(ザ・トール)」へ改装完了!

WordPressでソースコードをカッコ良く表示させるプラグイン【Crayon Syntax Highlighter】

このブログのある記事を書いている時にソースコードを載せる場面があり、まあ普通にテキストで書いても良かったのですが、どうせならカッコ良く載せたいな~とネットで表示させる方法を探していたら有りました!

それがCrayon Syntax Highlighterというプラグインです。

あまりプラグインを入れると重くなりそうなので、使うかどうか迷いましたが、重くなったら停止させればいいかと思い使ってみることにしました。

タケ坊
タケ坊
このプラグインはインストールして有効化すれば、記事編集エディタにボタンが表示されて、そのボタンをクリックすると表示される挿入画面から表示させたいソースコードを登録することができます。
柚子
柚子
プログラミング系のブログを運営されている人には非常に便利なプラグインなので、ぜひ活用してみてね。

Crayon Syntax Highlighterを使ったソースコードの表示例

 

Crayon Syntax Highlighterのインストールをする前に、どのような外観で表示されるか見てみましょう。

けっこうたくさんのテーマがあるので全部は紹介できませんが、いくつか紹介します。

テーマ名「classic」

// A sample class
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}

テーマ名「Ado」

// A sample class
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}

テーマ名「Epicgeeks」

// A sample class
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}

テーマ名「Bncplusplus」

// A sample class
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}

テーマ名「Mirc Dark」

// A sample class
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}

テーマ名「Sublime Text」

// A sample class
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}
柚子
柚子
まだまだテーマはありますし、フォントも変更できるので、いろいろ試してみてね。コメント

Crayon Syntax Highlighterのインストール

 

プラグインの新規追加でCrayon Syntax Highlighterをインストールして有効化します。

Crayon Syntax Highlighterインストール

柚子
柚子
プラグインのインストール方法はこちらの記事を参考にしてね!
関連記事

タケ坊 今回はWordPressの基本の1つ、プラグインのインストール方法について話しましょうか。 柚子 そーだね!ところで、そもそもプラグインが分からないって人はいないかな? タケ坊 […]

WordPressプラグインのインストール方法
柚子
柚子
プラグインをインストールしたら【有効化】を忘れないでね!

 

有効化するとメニューの設定の中に「Crayon」が追加されています。

Highlighter設定Crayonが追加

Crayon Syntax Highlighterの日本語化

Crayon Syntax Highlighterでは、日本語対応の翻訳ファイルが入っているはずなんですが、僕がインストールして設定画面を開いてみたら全部英語でした。

どうやら日本語の翻訳ファイルが正常に機能していないみたいですね。

英語は大の苦手なので、どうにかならないかと調べてみたら、有りました!!

やはりネットは情報の宝庫ですね。

とりあえず書いてある通りにやってみました。

この方法はサーバーにアクセスするのでFTPソフトが必要です。無い人は今後必要になるので用意しておきましょう。

無料のFTPソフトはいくつかありますが、僕は使い慣れている「FileZilla」をおすすめします。
FileZillaのダウンロード

関連記事

先日、このブログでWordPressプラグイン【Speech Bubble】についての記事を書いている時、Speech Bubbleを使う際にサーバーにアクセスする必要があると書きました。 しかし今まで、FTPソフトについてちゃんと触[…]

FileZilla(ファイルジラ)

FTPソフトからサーバーにアクセスして

/wp-content/languages/plugins/

の中にある

/wp-content/languages/plugins/crayon-syntax-highlighter-ja.mo
/wp-content/languages/plugins/crayon-syntax-highlighter-ja.po

この2つのファイルを削除してください。

Crayon Syntax HighlighterFTP日本語ファイル削除

 

そうすると、

Crayon Syntax Highlighter設定日本語

日本語になりました!これで安心です。

Crayon Syntax Highlighterの設定方法

細かい設定がいろいろできますが、基本的に初期設定のままでも問題なく機能します。

ここでは表示のデザインの変更箇所と読者さんが読みやすくなるための最低限の設定を書いていきます。

他の設定はお好みで変更してみてください。

メニュー画面の設定→【Crayon】をクリック

Crayon Syntax Highlighter設定画面

Crayon Syntax Highlighterの使い方

記事編集画面のツールバーにボタンが追加されているのを確認してください。

それをクリックするとソースコード挿入画面に移ります。

こちらはビジュアルエディタでCrayonを使う場合

Crayon Syntax Highlighter使い方ビジュアル

 

こちらはテキストエディタで使う場合です。こっちは分かりやすいですね。

Crayon Syntax Highlighter使い方テキスト

こちらがソースコード挿入画面です。
Crayon Syntax Highlighterソース挿入画面
  1. ここにソースコードを記入します
  2. 任意のタイトルを記入します。なくても良いです。
  3. ツールバーに表示させる言語を選びます。デフォルトのままでも良いです。
  4. ハイライトさせたい行を入力します。
  5. 挿入をクリックして完了です。
試しにこのサンプルコードを挿入します

// A sample class
class Human {

private int age = 0;
public void birthday() {
age++;
print(‘Happy Birthday!’);
}
}

Crayon Syntax Highlighterサンプルソース挿入

 

するとこのように表示されます。

// A sample class
class Human {

private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

 

7行目をハイライトしてみます。

7行目に色がつきました。

// A sample class
class Human {

private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}

4行目と7行目をハイライトしたいなどの場合は「4,7」とカンマで区切り、複数行まとめてハイライトする場合は「4-7」とハイフォンで区切ります。

Crayon Syntax Highlighterで表示速度が遅くなった時の対処法

便利なプラグインCrayon Syntax Highlighterですが、やはりプラグインなのでサイトの表示が重くなる心配はあります。

入れているプラグインによっては、プラグイン同士で競合して正常に機能しなくなる可能性もあります。

その際の対処法をいくつか紹介します。

対処法① <pre> タグを利用する

プラグインを使わずに、簡単にソースコードを記事に貼ることができるタグを紹介します。

テキストエディタ でコードを貼る時に、<pre> タグを利用します。

<pre></pre> で挟まれたソースコードは、スペースや改行などがそのまま表示されますので、ちょっとしたソースコードを貼るときに便利です。

例えば、

print(‘Happy Birthday!’)

をソースコードとして表示させたい時は、テキストエディタで

<pre>print(‘Happy Birthday!’)</pre>

と入力すれば下のように表示されます。

print('Happy Birthday!')

対処法② 他のプラグインを使ってみる

WordPressでソースコードを表示させるプラグインは他にもあります。

僕がCrayon Syntax Highlighterの次におすすめするプラグインは【WP Code Highlight.js】で、Crayon Syntax Highlighterよりは機能面で劣りますが、動作が軽いのが特徴です。

対処法③ プラグインを使わず外部サイトを利用する

そもそもプラグインを増やしたくないという人には、外部サイトの「Gist」を利用されるのをおすすめします。

海外のサイトで全部英語ですが、アカウント登録したら操作自体は簡単なので、外部サイトを利用することに抵抗がなければこちらをおすすめします。

対処法④ もう見た目にはこだわらない

これを言ったら身も蓋もないですが、最終的にはこれしかないでしょう。

結局にところ、見た目を気にするのはサイト運営者さんで、読者さんにとっては読みやすければ良いのです。

ソースコードを普通に文字で打って、その部分を枠などで囲ってあげれば読者さんには十分伝わりますよ。

まとめ

Crayon Syntax Highlighterは、記事の中でソースコードを見栄えよく表示できるWordPressプラグインです。

このプラグインを使うと、ソースコードがエディタのように綺麗に表示できます。

タケ坊
タケ坊
これからプログラム系のサイトを始めるには便利なプラグインですね。
柚子
柚子
HTML や CSS だけではなく、いろいろな言語に対応していますので、記事にソースコードをかっこよく表示させたい時はぜひ活用してみてくださいね。
最新情報をチェックしよう!