プラグイン「Crayon Syntax Highlighter」を使うと、記事内にソースコードを綺麗に表示できます。
CSSやPHPなど、プログラムのソースコードを記事に載せる機会が増えてきました。
ソースコードを記事にそのまま記入することもできますが、あまりカッコよくありません。
綺麗にコードを貼られているサイトを見かけると、自分のサイトも同じようにしたいと思いますよね。
今回は、プラグイン「Crayon Syntax Highlighter」を導入して、プログラムのソースコードを記事内に綺麗に埋め込む方法を紹介します。
プラグイン導入前後の比較
プラグイン「Crayon Syntax Highlighter」を導入する前と後で、記事に埋め込んだプログラムのソースコードの見た目がどのくらい変わるか見てみます。
ソースコードにはリンクテキストを編集するCSSを例として使用します。
関連：CSSを利用してリンクテキストのデザインを変更する方法（テンプレートあり）
まずは、プラグインなしで普通にソースコードを表示させます。
/*リンクテキスト（すべて）*/
a{
color:#000000;
border-bottom:solid 1px;
}
入力した文字を選択し、「Shiftキー + Altキー + X」で、ソースコードにすることができます。
ソースコードにするだけでは、背景の色までは変わらず白いままです。今回は分かりやすいように、背景をグレーにするスタイルを設定しています。
スタイルは、このサイトで使用していテーマ「LION MEDIA」のものを使用しています。
フォントなどが変わり本文との違いはあるので、ソースコードであることは分かります。しかし、デザイン的にはそこまで綺麗な印象はありません。
次は、プラグイン「Crayon Syntax Highlighter」を使用して同じコードを埋め込んでみます。
|
1 2 3 4 5 |
/*リンクテキスト（すべて）*/ a{ color:#000000; border-bottom:solid 1px; } |
1行ごとに縞模様になっていたり、行数が表示されたり、文字に色が付いたりと、綺麗に埋め込まれました。ソースコードであることが一目瞭然なので、非常に見やすいです。
ちなみにデザインは1種類ではありません。数えてみたところ、なんと58種類もありました！
|
1 2 3 4 5 |
/*例1 テーマ：Eclipse*/ a{ color:#000000; border-bottom:solid 1px; } |
|
1 2 3 4 5 |
/*例2 テーマ：Obsidian*/ a{ color:#000000; border-bottom:solid 1px; } |
自分のサイトにあったデザインを設定できるのも魅力です。
実際に比較してみる、プラグインを導入した方が良いことが実感できますね。
ソースコードとして読みやすいようなデザインになる。
サイトに合わせてデザインを変更できる。
次は、「Crayon Syntax Highlighter」の導入方法を見ていきます。
「Crayon Syntax Highlighter」の導入方法
「Crayon Syntax Highlighter」は、通常のプラグインと同様の方法で導入が可能です。
関連：「プラグイン」を使う（TinyMCE Advancedの導入）
まずは、検索を行います。
WordPress左メニューの「プラグイン」から「新規追加」をクリックします。
次に、上部右のほうにある検索ボックスで「Crayon Syntax Highlighter」と検索します。
「Crayon Syntax Highlighter」の「今すぐインストール」をクリックします。
インストール後は「有効化」をクリックしましょう。
これで「Crayon Syntax Highlighter」の導入が完了です。
最終更新日に関して
「Crayon Syntax Highlighter」は、最終更新日が2年前で少し古いです。
実際に使用していますが、現在のWordPressでも問題なく使用できています。
現在のバージョン：WordPress4.9.6（2018年5月20日現在）使用可能
更新されていないというのはやはり不安なので、今後良いプラグインが出てきた場合は乗り換えるかもしれません。ひとまず、今のところ一番使い勝手が良いので使用しています。
「SyntaxHighlighter Evolved」を使用しない理由
「SyntaxHighlighter Evolved」というソースコード埋め込みができるプラグインもあります。
こちらは最近も更新されているので良さそうですが、両方を使用してみた結果「Crayon Syntax Highlighter」を使うことに決めました。
「SyntaxHighlighter Evolved」では少し都合が悪い点があったためです。
「SyntaxHighlighter Evolved」の不都合点
- 記号が文字参照コードになってしまう
- 「<」などの記号が「<」になるなど、正しく表示されない
- 記事内に[css]などのショートコードを入れる必要がある
- プラグインを無効にすると、それが記事にそのまま表示されてしまう
- 今後プラグインを変更しようと思った際に修正が大変
PHPでは「<」を多用するため、正しく表示されないのは致命的でした。
コピペでそのまま使えないと、サイトの信用を落とすことにもなりかねません。
また、今後プラグインが使えなくなることがあった場合、記事すべてのショートコードを消す作業があると考えると、使うのを躊躇してしまいます。
ということで、私は「SyntaxHighlighter Evolved」ではなく「Crayon Syntax Highlighter」を使用することに決めました。
「Crayon Syntax Highlighter」の基本操作
「Crayon Syntax Highlighter」の基本的な使い方を見ていきます。
細かい設定はいろいろありますが、記事にプログラムのソースコードを埋め込むだけなら簡単です。
基本設定からソースコードの埋め込み方法までを紹介します。
Crayon Syntax Highlighterの日本語化
最初は設定がすべて英語なため、英語が読めない私のような人には使いにくいです。
まずは「Crayon Syntax Highlighter」を日本語化していきます。
FTPにアップロードされている言語ファイルを削除することで、日本語化することができます。
エックスサーバー
関連：エックスサーバーWebFTPにPHPファイル等をアップロードする方法
まずは、エックスサーバーのインフォパネルから、ファイルマネージャにログインします。
次にCrayon Syntax Highlighterを日本語化したいドメインを選択します。
「public_html」をクリックします。
「wp-content」をクリックします。
「languages」をクリックします。ここに言語ファイルが入っています。
「plugins」をクリックします。プラグインのフォルダですね。
プラグインで使用されている言語ファイル一覧が表示されます。
ここから「Crayon Syntax Highlighter」のものを削除することで、WordPressの翻訳が適用され、日本語にすることができます。
「crayon-syntax-highlighter-ja.po」と「crayon-syntax-highlighter-ja.mo」の2つを選択します。
念のためダウンロードしておけば、削除後に元に戻すこともできます。
ダウンロードは、ファイル名をクリックすると行われます。
最後は削除です。2つを選択後、右上にある「ファイルの削除」をクリックします。
これでCrayon Syntax Highlighterの日本語化が完了です。
Crayon Syntax Highlighterの基本設定
次は基本設定を行います。
そのままでも使用できますが、好みに合わせて変更した方が良い部分もあるので見ていきます。
Crayon Syntax Highlighterの設定は、WordPressの設定から行います。
WordPress左のメニューの「設定」から「crayon」をクリックします。
ここから、好みに合わせて自由に設定してください。
いくつか例を見ていきます。
テーマとフォント
テーマの初期設定は「Classic」、フォントの初期設定は「Monaco」になっています。
テーマを変更すると埋め込みデザインが、フォントを変更すると文字のデザインが変わります。
サイトの雰囲気や好みに応じてデザインを変えましょう。
ツールバーと行
ツールバーの挙動と、行の設定を行うことができます。
個人的に、マウスをのせると1行目に覆いかぶさるようにツールバーが出るのが好きではないので、ツールバーは「常に表示」に設定を変更しています。
この他にも細かい設定がかなり多いので、自由に設定しましょう。
Crayon Syntax Highlighterの使い方
いよいよCrayon Syntax Highlighterを使用します。
記事の投稿画面で使用することで、プログラムのソースコードを綺麗に埋め込むことができます。
まずは投稿画面の編集メニューから「<>」をクリックします。
以下の編集画面が表示されます。
あとは情報を入力し、右上の「挿入」をクリックするだけで埋め込まれます。
「タイトル」はプログラムのタイトルです。なくても問題ありません。
「プログラム言語」は、これから入力するソースコードの言語を選択します。「Default」のままでも大きな問題はありませんが、選択した方が間違いなく単語が色分けされます。
「コード」の部分にプログラムのソースコードを入力します。
設定部分は、最初の設定をしっかりしておけば、特に変更の必要はありません。
これで、プログラムのソースコードが記事に埋め込まれます。
今回のまとめ
プラグイン「Crayon Syntax Highlighter」の特徴や基本操作を紹介しました。
使用すると、プログラムのソースコードを記事内に綺麗に埋め込むことができます。ソースコードの見やすさが全然違うので、記事に埋め込む必要がある場合はぜひ導入したいプラグインですね。
デザインも多く、自分のサイトに合わせて設定を変更できるため使いやすいです。
コードを埋め込む際の操作も、投稿画面からボタン一つでできるようになっているのが嬉しいです。
活用して見やすいサイトを作りましょう。
ここまでお読みいただき、ありがとうございました。
関連：知識ゼロからホームページ作成・公開するまでの手順と公開後の作業まとめ
本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる