WordPressでプラグインCrayon Syntax Highlighterを使ってソースコードを表示する方法について解説します！
WordPressでソースコードを張り付けて「こうするとできるよ！」という事を紹介したいときありますよね！
- <や>がタグとして認識されて表示してもらえない。
- <や>と書けばいいとわかっても面倒だし忘れてしまう。
- そもそもテキストだとなんかダサイ。
色々問題がつきまといますね。
WordPressは便利機能満載ですから、こんな時にも役に立つプラグインがあります。
今回はそんなソースコードを張り付けるのに便利なプラグインの「Crayon Syntax Highlighter」をご紹介します！
- WordPressでプラグインCrayon Syntax Highlighterを使ってソースコードを手軽にきれいに張り付ける方法がわかる！
Crayon Syntax Highlighter
まずは機能の概要です！
Crayon Syntax Highlighterでは次のような操作を行うことができます。
- <や>を表示するための変換をしてくれる。
- ソースコードをソースコードらしく表示してくれる。
なんとも抽象的な書き方ですが、こんな表現が適切何だと思います。
ソースコードを紹介しても見栄えが悪いと、技術的に優れていてもなんか劣って見えてしまうんですよね。
せっかくですから見栄えよく見せたいですね！
こだわって見せることもできますが、標準でも十分ソースコードらしく見えます！
- ソースコードをそれらしく表示してくれます！
Crayon Syntax Highlighter操作方法
では実際の操作方法についてです！
一応インストールするところから始めますね！
インストール
まずはWordPress管理画面にログインします。
プラグインの「新規追加」をクリックします。
キーワードに「Crayon Syntax Highlighter」を入力します。
全部入れなくても途中で出てくるとは思いますが、一応コピペしやすいように全部書きました。
Search Regexが表示されるので「今すぐインストール」をクリックします。
インストールが完了するとボタンが変わります。
「有効化」をクリックします。
プラグイン画面に変わります。
有効化されたことを確認します。
インストール完了です！
日本語化
ただ、日本語化もしておくとわかりやすいかもしれないですね。
その時は以下のファイルを消しておきます。
/wp-content/languages/plugins/crayon-syntax-highlighter-ja.mo
/wp-content/languages/plugins/crayon-syntax-highlighter-ja.po
プラグインのインストールはWordPress上でポチポチするだけですが、日本語化はファイルの削除が必要です！
- ファイルを削除して日本語化しておくと良いです！
- 消したファイルは設定のリセット操作で元に戻ってしまいます！
設定
特に設定しなくても使えますが、一応ご案内だけしておきます！
設定のCrayon Syntax Highlighterをクリックします。
Crayon Syntax Highlighterの画面です。
設定項目は多岐にわたりますので、必要そうなところだけ解説します。
テーマ/フォント/サイズ
テーマ
テーマを変える事で見た目が大きく変わります。
Duplicateするとテーマを複写でき、複写したテーマをEditから編集する事もできます。
テーマの編集では、コメントのときの文字の色やアンダーラインを付けたり、背景色などを変更する事ができます。
ただ、そこまで凝るという事も無いのかなと思ってしまったりはします。
- Classic：標準的で見やすい。
- Eclipse：javaっぽい。
- Dark Terminal：コマンドラインっぽい。
フォント
フォントはそのままフォントですね。
ただあまり選択肢は多くはありません。
サイズ
サイズは表示されるサイズですね。
高さや横幅を変えると表示される枠が変更されます。
もちろん表示されない分についてはスクロールバー等が付きます。
横幅等は指定しなければ最大幅で表示されます。
デフォルトが良いのかなと思います。
ツールバー/行
ツールバー
これは実際にどうなるか見て頂くのがわかりやすいのかもしれません。
私は常に表示させるために「マウスオーバー時」から「常に表示」に変更しています。
一行分増えますが「なんかいじれるんだ」というのがわかったほうがわかりやすいのかなと思っています。
ツールバー有り
ツールバー無し
行
「デフォルトで行番号を表示」のチェックがお好みで別れますね。
デフォルトでは外れていると思いますので、行番号を表示させたい場合はチェックを入れましょう。
「Wrap lines by default」のチェックも好みは分かれるかもしれません。
チェックを入れると折り返して表示されるようになり、長い行も全部見えるようになります。
コード
まず「コードのコピー/貼り付けを有効にする」のチェックは重要になってきます。
コピーしてもらいたいときはチェックを付けておく必要があります。
一方コピーされたくないときはチェックを外しておきます。
公開しているわけですから、デフォルトのままチェックを付けておくのが普通かなとは思います。
また、「デフォルトでプレインコードを表示する」のチェックも重要です。
チェックを入れると、行番号のコピーがされなくなります。
標準で枠についているツールバーからコピーすると行番号はコピーされません。
しかし、マウスで選択してCtrl+Cでコピーすると行番号までコピーされてしまいます。
Crayon Syntax Highlighterを皆知っているわけではないですからね。
ただ、これにチェックを付けると背景色や文字色は消えます。
見栄えがなんとも寂しげになり、何のためにCrayon Syntax Highlighterを入れているのかちょっとわからなくなったりもします。
本末転倒感があります。
デフォルトのままチェックは外しておき、コピーはツールバーを使ってもらえるような工夫があると良いのかもしれませんね。
プレインコードを表示 こんな感じで 寂しくなります。
「常にスクロールバーを表示する」はも好みになります。
一応、スクロールバーがあると「もうこれ以上先には何もないんだよ」が確認しやすいかもしれないですね。
タグ/プログラム言語/読み込みファイル/Posts/タグエディタ
タグ
とりあえずデフォルトで良いとは思います。
プログラム言語
とりあえずデフォルト（Default）で良いとは思います。
読み込みファイル
とりあえずデフォルト（空白）で良いとは思います。
Posts
Show Crayon Postsをクリックすると、投稿IDやタイトルが表示されます。
WordPress内のどこでCrayon Syntax Highlighterが使われているかチェックする事ができます。
タグエディタ
とりあえずデフォルトで良いとは思います。
その他/デバッグ/
その他
「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」のチェックを入れておいた方がいいかもしれないですね。
表示速度の改善につながります。
逆に言えば、こういったプラグインを使えば使う程、表示速度は多少なりとも遅くなります。
塵も積もればで、気を付けないと中々対策しにくくなったりしますね。
デバッグ
とりあえずエラーはデフォルトで、ログファイルは何かあった時で良いのかなと思います。
使いそうなところだけピックアップして解説しました！
- 必ず変えておくようなところは基本的にはありません！
- 強いて言えば「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」のチェックを入れておいた方が良いです！
使用方法
記事の編集画面を開きます。
まずテキストを選択します。
ボタンが表示されますので「crayon」ボタンをクリックします。
Crayon Syntax Highlighterの入力画面です。
タイトルを記入し、コードを入力します。
その他、必要に応じて設定を変更します。
この設定は先程の設定画面で行った設定が基本となっています。
ここで編集した設定は保存されません。
永続的に変更するためには先程の設定画面から変更する必要があります。
このとき「1文章として表示」を選択すると、ただのCSS上の表現として反映されます。
Crayonの機能としての表示ではなくなり、ツールバーなどは表示されなくなります。
入力が完了したら「挿入」をクリックします。
<pre>タグで囲まれたソースコードが入力されます。
マルヒだよ！
日本語だと全然ソースコードぽく無いですよね。
public class HelloWorld{
public static void main(String[] args){
System.out.println("Hello World!!");
}
}このプラグインを使っただけで、なんとなくそれっぽい見栄えになります！
- 設定は必ずしも変更する必要はありませんが特にその他の項目は一応確認しておきましょう！
- 設定はとても簡単で、後は気軽にそれっぽくソースコードを表示する事ができるようになります！
まとめ
いかがでしたでしょうか？
WordPress上でソースコードを公開するならぜひ導入しておきたいですね。
後は<が<等の記号を使う場合に、その入力方法を確認するというイレギュラーな使い方もできます。（笑）
- WordPressでプラグインCrayon Syntax Highlighterを使ってソースコードをそれっぽく表示する方法でした！
- Crayon Syntax Highlighterの設定の中で必要そうなものをピックアップして解説してみました！
ここまでお読みくださりありがとうございました！