ソースコードを綺麗に表示させるプラグイン「Crayon Syntax Highlighter」

以前、ソースコードを綺麗に表示させるプラグインとして『SyntaxHighlighter Evolved』を紹介いたしましたが、今回はより高機能かつ軽量なプラグイン「Crayon Syntax Highlighter」について紹介させていただきます。

というのも、当サイトで「SyntaxHighlighter Evolved」でHTMLエンティティが上手くいかない事象が発生してしまったので・・・

さて、それでは早速使い方について説明していきたいと思います。

表示サンプル


「Crayon Syntax Highlighter」の特徴

「Crayon Syntax Highlighter」は、「SyntaxHighlighter Evolved」同様にWordPressの記事内に様々なソースコードを表示することができます。
HTML、XHTML、XML、CSS、JavaScript、PHPC++、C#、Java、Visual Basic、Perl、Ruby、Pythonなど、対応言語がとても豊富で、表示時のカラーバリエーション(テーマ)も多数用意されています。
そして、なんといっても表示が軽い!
記事内に記述するためのコードも「SyntaxHighlighter Evolved」と同じくできるので、HTMLエンティティが上手くいかない場合はいっそこちらに乗り換えたほうが手っ取り早いと思います。


導入方法

以下からプラグインをダウンロードし、WordPressにインストール・有効化してください。
WordPressのプラグイン管理画面から「Crayon Syntax Highlighter」を検索してインストールしてもOKです。
WordPress › Crayon Syntax Highlighter « WordPress Plugins


使い方

記事投稿画面のエディターにcrayonという表示が追加されるので、それを使います。

以下、コードの挿入画面です。


ひとまず言語を選んでソースコードを記述して「挿入」をクリックすればOKです。
基本的には見たままですし、親切に日本語で説明もあるので迷うことはないと思います。

また、preタグに特定のCSSクラスを追加する方法もできますが、面倒なのでこの機能を使うのが無難だと思います。


「SyntaxHighlighter Evolved」からの移行

SyntaxHighlighter Evolved同様に、[html]ソースコード[/html]といった記述も可能なので、記事内の記述を変更せずにそのまま切り替えることができます。
なお、上記のコードはデフォルトでは利用できないので、プラグインの設定画面より「Crayonsとして[php][/php]のようなミニタグをキャプチャします」にチェックを入れて変更を更新してください。
設定画面もほとんど日本語で記載されているので問題ないと思います。



他にも様々な機能や記述方法が利用できる便利なプラグインなので、ぜひ使い方をマスターしてWordPressをカスタマイズしてください。

関連記事

wpeditor

WordPressのテキストエディターを変更するプラグイン「WP Editor」

WordPressのデフォルトのテキストエディターって、タブキーでインデントを挿入できなかったり、ハ

記事を読む

post snippets - 出力

WordPressに投稿用の定型文を追加するプラグイン「Post Snippets」

WordPressで投稿を執筆している時に、よく使う文章やHTMLタグ、PHPコードなどを毎回タイプ

記事を読む

jetpack

WordPressの便利機能満載プラグイン「Jetpack」

非常に便利なWordPressのプラグインですが、数が多すぎて何をいれればいいか分からない、といった

記事を読む

スクリーンショット 2014-01-13 23.54.23

ソースコードを綺麗に表示するプラグイン「SyntaxHighlighter Evolved」

WordPressの記事内にHTMLやPHPなどのソースコードを載せたい場合に便利なプラグイン「Sy

記事を読む

no image

WordPressに人気記事を表示するプラグイン「WordPress Popular Posts」

よくブログのサイドバーなどで「人気記事の一覧」というのを目にするかと思います。 今回は、その「人気

記事を読む

Dashboard Notepad - メモ作成画面

ダッシュボードにメモ欄を追加できるWordPressプラグイン「Dashboard Notepad」

ちょっとしたアイディアや他ユーザーへの連絡など、WordPressのダッシュボードにメモを残したい場

記事を読む

PAGE TOP ↑