stryhのノート ~stryh/changelog

Crayon Syntax Highlighterを導入 – コードをハイライトするタグの書き方が簡単!そして表示の動作が軽い!気に入った!

Crayon Syntax Highlighterを導入 – コードをハイライトするタグの書き方が簡単!そして表示の動作が軽い!気に入った!

WordPressでコード(HTML、CSS、PHPなど)を表示する際、WP SyntaxHighlighterというプラグインを使ってました。
そのプラグインをやめCrayon Syntax Highlighterを導入。

いや〜、コードがハイライトされるまで表示が早く、動作が軽いです。
気に入りました!

なぜWP SyntaxHighlighterをやめたのか

理由は簡単です。
ハイライトされるまで遅い。
意図した設定をしてもその通りにならない。

原因を特定している時間があるのなら他のコードをハイライトするプラグインを探した方がいいだろうと探し、見つけたのがCrayon Syntax Highlighter
Crayon Syntax Highlighter

インストール

インストールは簡単。
WordPressの管理画面のプラグイン追加画面で『Crayon Syntax Highlighter』と検索して検索結果からCrayon Syntax Highlighterを探しインストールをクリックするだけ。

インストール - Crayon Syntax Highlighterを導入
△プラグイン検索結果画面。
『すぐにインストール』クリックしインストール。
その後に有効化すればインストール完了。

ちょっと困ったこと

実際にインストールし決まった書き方で書いてページを表示させて見たのですが、ちょっとした問題が発生。

それはメタ文字(<や>や=など)がエスケープ処理されてしまうこと。

プラグインとしては全うな処理をしているんでしょうけどエスケープされて画面にコードを表示した時におかしな表示ではコードをハイライトさせ分かりやすく載せている意味がないので何かいい方法はないものかGoogleで検索。
crayon-syntax-highlighterで勝手にHTMLEscapeされる問題をどうにかしたい | D-NATIVE
△検索した結果見つけたのが↑のページ。

このページの情報を参考にプラグインを修正。

修正後、確認したらエスケープ処理はされずに正常に表示されました。

実際の表示

実際の表示 - Crayon Syntax Highlighterを導入
△実際にコードをハイライトさせた表示。
上からPHP、HTML、Java。
以前使っていたWP SyntaxHighlighterと比較すると表示は速いです(あくまで自分のブログ環境の話しです)。

対応言語

現在(2014/03/14)の対応プログラム言語。
結構な数です。
コードをハイライトしてくれるプラグインは他にも結構ありますが、Crayon Syntax Highlighterのようにこれだけの対応言語をおさえているのはないんじゃないかなと思います。

ID Name
abap ABAP
as ActionScript
ada ADA
amigados AmigaDOS
apache Apache
applescript AppleScript
arduino Arduino
asp ASP
asm Assembly (x86)
autoit
c C
c# C#
c++ C++
coffee CoffeeScript
css CSS
default Default
delphi Delphi/Pascal
dws DelphiWebScript/DWS
diff diff
erlang Erlang
go Go
haskell Haskell
ini INI
ilogic Inventor iLogic
java Java
js JavaScript
less LESS
lisp Lisp
lua Lua
matlab MATLAB
reg Microsoft Registry
miva MIVA Script
monkey Monkey
batch MS DOS
mysql MySQL
objc Objective-C
plsql Oracle PL/SQL
perl Perl
pgsql PgSQL
php PHP
ps PowerShell
python Python
r R
ruby Ruby
sass Sass
scala Scala
scheme Scheme
sh Shell
tex TeX
tsql Transact-SQL
vim Vim
vb Visual Basic
vbnet Visual Basic .NET
xhtml XHTML
yaml YAML
zsh ZSH

書き方

Crayon Syntax HighlighterをGoogleで検索し書き方を調べてみるとだいたいが

という書き方が大半(htmlの箇所に他の対応言語を指定)。
自分はこのスタイルが個人的には好かないのでpreタグで囲いlang属性で言語指定のスタイルで書くようにしました。

後の考えてpreタグの方が無難かなという考えもあります。
今は使えるプラグインかもしれないけど、将来使えないプラグインになってしまった場合(早々に使えなくなることはないと思いますが)、『

』の書き方だと不格好になってしまうと思います。
preタグであればハイライトはされないかもしれないけど、HTMLのpreタグの表示でなんとかしのげるかなと思っています。
それとが付く程難しいわけでもなくどちらかというと簡単な書き方だと思います。
まー、そこは個人の好き嫌いがあると思うので好きな書き方でいいと思います。

<pre lang=”php”>
$hello=”Hello World”;
print ($hello);
</pre>

△preタグを使ったPHPをハイライトする書き方。
上の書き方をすると『実際の表示』のところで載せた画像のように表示してくれます。
PHPの箇所に他の対応言語を指定するとその言語でハイライトしてくれます。

あとがき…

しばらく大きな悩みではなかったが、コードのハイライトがおかしい悩みはCrayon Syntax Highlighterで解決。
本当、ハイライトするための書き方も簡単ですし、実際に画面に表示する時の動作も軽い!
本当、気に入りましたよ!(^-^)/

URL :
TRACKBACK URL :

Leave a reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top