ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】Crayon Syntax Highlighterに乗換え!ソースコードを色分けて行番号表示

ソースコードを色分けする少女

WordPressプラグイン「Crayon Syntax Highlighter」を使うと、ブログ記事内のソースコードを色分け(ハイライト)して行番号も付けられます。SyntaxHighlighter Evolvedから乗換えた理由も紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

技術系のブログ記事を書いていると、HTML,CSS,PHP,JavaScriptなどのソースコードを掲載することが少なくありません。

そんなソースコードに行番号を付けたり、関数や文字列やタグなどを区別して色分け(ハイライト)すると見やすくなります。以前紹介した「SyntaxHighlighter Evolved」もそれらを自動化できる便利プラグインです。

WordPressでソースコードを色分けし行番号つきで表示!プラグインSyntaxHighlighter EvolvedWordPressでソースコードを色分けし行番号つきで表示!プラグインSyntaxHighlighter Evolved74 shares

ブログ記事でHTMLやCSS、WordPress関係のPHPなどを表示したい場合…

「Crayon Syntax Highlighter」の利用メリット

Crayonで色分けしたソースコード

ブログでソースコードを紹介する機会が多いなら、次のようなメリットがあります。バージョン「2.6.1」で評価しています。

  1. コードの種類により、タグや関数を自動的に色分けして見やすい
  2. 行番号をつけられるので、記事内の説明も容易になる
  3. HTML、JavaScript、CSS、PHPだけでなく多くのコードに対応してる
  4. CSS(スタイルシート)での整形が不要になる
  5. 表示されたソースコードを簡単にコピーできる
  6. 「SyntaxHighlighter Evolved」からタグ修正なしで乗換可能

このプラグインに関しては、登録した単語(関数やタグ)にCSSを適用しているだけなのですが、自力で実装するには、かなりの労力と時間がかかりそうです。

私は簡単に自作できる部分については、WordPressプラグインをなるべく使わないようテーマ設計しています。下記事も参考にしてみてください。

WordPressで13プラグインを減らして高速化する方法まとめWordPressで13プラグインを減らして高速化する方法まとめ245 shares

WordPressプラグインは便利ですが、多用しすぎると高速化を阻害する要因にも…

「SyntaxHighlighter Evolved」から乗換えた理由

ほぼ同じ機能を持つWordPressプラグイン「SyntaxHighlighter Evolved」ですが、半年くらい使ってみて下のような理由により乗り換えました。

  1. WordPressバージョンアップにつれて、動作が重く感じられるようになった
  2. Crayonの方が多くのフォントから選べる
  3. Crayonの方がツールバーでできることが多い

決定的だったのは「1」番目の理由です。表示が遅いだけならまだしも、表示されないこともあって、動作が不安定だと感じました。

その後「SyntaxHighlighter Evolved」もバージョンアップを繰り返しているので、上の点が改善されている可能性もありますが、私はCrayonを気に入ったのでしばらく使います。

ちなみにどちらのプラグインも、CSS・JavaScriptファイルを勝手に追加するため、表示速度の高速化の障害になります。私は下記事の方法でなるべく無駄のない設定にしています。

【WordPress高速化】プラグインのCSS・JavaScriptを削減・圧縮・まとめる方法【WordPress高速化】プラグインのCSS・JavaScriptを削減・圧縮・まとめる方法44 shares

WordPressプラグインやテーマには、独自のスタイルシートやJavaScri…

「Crayon Syntax Highlighter」インストールと設定方法

WordPress管理画面の左メニューの「プラグイン」→「新規追加」から「Crayon Syntax Highlighter」を検索して、インストール。必ず有効化してください。

設定は、WordPress管理画面「設定」の「Crayon」からできます。

まずは「テーマ」(デザイン)、「フォント」「サイズと余白」を自分の好みで設定しましょう。

「SyntaxHighlighter Evolved」から乗換えた人で[php]タグを使ってた人は、タグ設定の「Crayonsとして[php][/php]のようなミニタグをキャプチャします」にチェックしましょう。

それ以外の設定は初期値で問題ありません。参考のために、私の設定を公開します。今後、変えていく可能性も大ありですけど。

私の現在のおすすめ設定

オススメというか、個人の好みです。正直よくわからない設定もあります。こだわりの箇所を何点か紹介します。赤マークも付けておきます。

  • ツールバーとスクロールバーは「常に表示」してグラグラ動かないように
  • コード行は縞模様で表示して、見やすく
  • 行番号はデフォルトで表示
  • コードのコピー/貼り付けを有効にする
  • タグエディタにはチェックしない
  • マウスジェスチャー、アニメーション、統計は無効に
Crayon Syntax Highlighterの設定方法
Crayon Syntax Highlighterの設定方法
Crayon Syntax Highlighterの設定方法
Crayon Syntax Highlighterの設定方法

ソースコードを色付け表示する方法

プラグインの導入と設定が完了したら、さっそくソースコードを表示してみましょう。方法はいくつかあります。

ビジュアルエディターを使ってる場合は、「Crayon」ボタンを使えばソースコードを入力できるようです。私は未確認です。

私は「SyntaxHighlighter Evolved」の時に利用していた言語タグ([php]など)で、下のように記述しています。

[html]
<!DOCTYPE html>
<html lang=”ja”>
<head>
<title>ここは何色になるのかな?</title>
</head>
<body>
<p>HTMLではハイライトがわかりづらいかも!</p>
</body>
</html>
[/html]

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

これでブログにソースコードを記述しても、見やすく表示されますね!

まとめ:今日のゆめぴょんの知恵

今回の記事内容をざっくり言うと。

  • 「Crayon Syntax Highlighter」はWordPressの便利プラグイン
  • ブログ記事内のソースコードを自動的に色分けしたり、行番号を付けてくれる
  • 「SyntaxHighlighter Evolved」も同様。動作不安定につき乗り換えた
  • Crayonの設定は好みで。私の設定も気に入れば参考にして

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:WordPressで13プラグインを減らして高速化する方法まとめコピペでOK!WordPress Popular Postsで新着と重複なしのカテゴリ別サムネイル付の人気記事表示:次記事»
ページ
↑先頭
ホーム