キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

ソースコードを早く美しく表示してくれるプラグイン Crayon Syntax Highlighter

      2014/12/03

1

やっぱり自宅のパソコンが一番落ち着く、キャリコ( @calicocatxyz )です。

今まで10インチのラップトップを使ってたけど、自宅の24型モニタだと見え方が全く違うから、カスタマイズ心が疼きます。。さて、本日は WordPress のプラグインの紹介をラテにしてもらいます。それじゃあよろしくね♪

ラテ

こんにちは、ラテにゃ。

最近のカスタマイズ記事を見るとソースコードの表示方法が変わってることに気付いたにゃ。

ちょっと前まではキャリコでも使ってる「 SyntaxHighlighter 」で表示させてたサイトが多かった気がするんだけど、こぞって変更するということはそれなりに理由があるはずにゃ!

そんなわけで今日はソースコードを早く美しく表示してくれるプラグイン「 Crayon Syntax Highlighter 」の紹介にゃ。

Ads by Google

Crayon Syntax Highlighter

インストールする

WordPress のダッシュボードからプラグインを選び新規追加から「 Crayon Syntax Highlighter 」を検索してインストールするにゃ。このときに忘れずに有効化するにゃ。

インストールしたらダッシュボードの設定のところに Crayon が追加されてるにゃ。このページで Crayon Syntax Highlighter のさまざまな設定が出来るにゃ。

設定する

設定方法はこちらのブログに詳しく記載されてるから参考にするといいにゃ。

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

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

wispyon.com

基本的にはデフォルトのままでも大丈夫にゃ。でもゆめぴょんさんが言ってるようにツールバーとスクロールバーは「 常に表示 」させてグラグラ動かないようにしたにゃ。

ほかには「 Crayonsとして[php][/php]のようなミニタグをキャプチャします。」にチェックを入れて、SyntaxHighlighter と同じ使い方が出来るようにしたにゃ。そうすることによってプラグインを乗り換えても過去記事のソースコードが Crayon Syntax Highlighter で表示されるにゃ。

あとは HTML も CSS も面倒臭がって [php] で囲ってたからソース言語を表示しない設定にしたにゃ。

使い方

引数指定は SyntaxHighlighter と同じ使い方にゃ。

[php]
ここにコードを入れるにゃ
[/php]

php の場合はこのような指定の仕方にゃ。

重大な問題点

過去記事のコードが文字化けしてしまう

半角の「 < 」など一部の文字が特殊文字コードに勝手に変換してしまうにゃ。この問題を解決するのにこちらのブログが役に立ったにゃ。

まずは「 Crayon Syntax Highlighter 」のプラグイン編集画面から「 crayon-syntax-highlighter/crayon_formatter.class.php 」というプラグインファイルを探すにゃ。次に「 htmlspecialchars 」で検索をかけて、その部分の行頭に「 // 」を入れてコメントアウトするにゃ。

↓ 3行目を次のように変更するにゃ。

次に「 public_html/blog/wp-content/plugins/crayon-syntax-highlighter/langs/default/operator.txt 」を編集して文字化けする記号をコメントアウトするにゃ。

キャリコの場合はこの3つを変更することで文字化けはなくなったにゃ。

まとめ

過去記事を見てみるとソースコードの表示が遅いような気がしたにゃ… でもこのプラグインに乗り換えてからはすぐに表示されるようになったにゃ。ソースコードを公開する機会が多い人にとっては良いプラグインだと思うにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - プラグイン

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

eye
AmazonJS の商品画像がぐるぐる回って表示されないときの対処法

缶コーヒーが美味しくてついつい飲んじゃう、キャリコ( @calicocatxyz …

WordPress のリビジョンを削除してデータベースを最適化するプラグイン Better Delete Revision

ブログのインポート&エクスポート機能は神だと思うキャリコ( @calicocat …

ワンクリックでサイドバーを固定できる WordPress のプラグイン Q2W3 Fixed Widget

今月も個人でのペペロンチーノ消費量は世界トップクラスだと思ってるキャリコ( @c …

音楽再生機能で Twitter と連携した SoundCloud がWordPress でも流せるプラグイン

いよいよイギリスで一人暮らしが始まったキャリコ( @calicocatxyz ) …

WordPress で特定の記事だけアドセンスを非表示にする方法
WordPress で特定の記事だけアドセンスを非表示にする方法

Google AdSense 停止は辛い、キャリコ( @calicocatxyz …

Standard Widget Extensions
STINGER5 でスクロールしたときサイドバーが中途半端に固定される現象を解決

ワインとシャンパンが弱点のキャリコ( @calicocatxyz )です。 いや …

WordPress のカテゴリを五十音順から任意の順番に変更するプラグイン『 Category Order 』

HARIBO が止まらないキャリコ( @calicocatxyz )です。 HA …

WordPress で新サイトを開設する時に必ず入れるプラグイン14選
WordPress で新サイトを開設する時に必ず入れるプラグイン14選

WordPress は4つ運営中、キャリコ( @calicocatxyz )です …

WordPress Popular Posts で人気記事一覧をサイドバーに表示させる

人の不幸は蜜の味、キャリコ( @calicocatxyz )です。 旅行ブログで …

アクセスアップに効果あり!過去記事を自動ツイートする WordPress のプラグイン Tweetily

イギリスの一軒家で一ヶ月の一人暮らしが確定したキャリコ( @calicocatx …