このブログのある記事を書いている時にソースコードを載せる場面があり、まあ普通にテキストで書いても良かったのですが、どうせならカッコ良く載せたいな～とネットで表示させる方法を探していたら有りました！
それが【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をインストールして有効化します。
タケ坊 今回はWordPressの基本の1つ、プラグインのインストール方法について話しましょうか。 柚子 そーだね！ところで、そもそもプラグインが分からないって人はいないかな？ タケ坊 […]
有効化するとメニューの設定の中に「Crayon」が追加されています。
Crayon Syntax Highlighterの日本語化
Crayon Syntax Highlighterでは、日本語対応の翻訳ファイルが入っているはずなんですが、僕がインストールして設定画面を開いてみたら全部英語でした。
どうやら日本語の翻訳ファイルが正常に機能していないみたいですね。
英語は大の苦手なので、どうにかならないかと調べてみたら、有りました！！
やはりネットは情報の宝庫ですね。
とりあえず書いてある通りにやってみました。
この方法はサーバーにアクセスするのでFTPソフトが必要です。無い人は今後必要になるので用意しておきましょう。
無料のFTPソフトはいくつかありますが、僕は使い慣れている「FileZilla」をおすすめします。
FileZillaのダウンロード
先日、このブログでWordPressプラグイン【Speech Bubble】についての記事を書いている時、Speech Bubbleを使う際にサーバーにアクセスする必要があると書きました。 しかし今まで、FTPソフトについてちゃんと触[…]
FTPソフトからサーバーにアクセスして
/wp-content/languages/plugins/
の中にある
/wp-content/languages/plugins/crayon-syntax-highlighter-ja.mo
/wp-content/languages/plugins/crayon-syntax-highlighter-ja.po
この２つのファイルを削除してください。
そうすると、
日本語になりました！これで安心です。
Crayon Syntax Highlighterの設定方法
細かい設定がいろいろできますが、基本的に初期設定のままでも問題なく機能します。
ここでは表示のデザインの変更箇所と読者さんが読みやすくなるための最低限の設定を書いていきます。
他の設定はお好みで変更してみてください。
メニュー画面の設定→【Crayon】をクリック
Crayon Syntax Highlighterの使い方
記事編集画面のツールバーにボタンが追加されているのを確認してください。
それをクリックするとソースコード挿入画面に移ります。
こちらはビジュアルエディタでCrayonを使う場合
こちらはテキストエディタで使う場合です。こっちは分かりやすいですね。
- ここにソースコードを記入します
- 任意のタイトルを記入します。なくても良いです。
- ツールバーに表示させる言語を選びます。デフォルトのままでも良いです。
- ハイライトさせたい行を入力します。
- 挿入をクリックして完了です。
// A sample class
class Human {
するとこのように表示されます。
// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}
７行目をハイライトしてみます。
７行目に色がつきました。
// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}
４行目と７行目をハイライトしたいなどの場合は「４,７」とカンマで区切り、複数行まとめてハイライトする場合は「４-７」とハイフォンで区切ります。
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プラグインです。
このプラグインを使うと、ソースコードがエディタのように綺麗に表示できます。