キャリコ

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

  関連記事

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

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

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

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

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

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

WordPress のプラグイン AddQuicktag で作業効率大幅アップ!

最近ずっとひきこもりがちのキャリコ( @calicocatxyz )です。 イギ …

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

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

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

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

WordPress のプラグイン Autoptimize で不具合が出た時の対処法
WordPress のプラグイン Autoptimize で不具合が出た時の対処法

これで解決、キャリコ( @calicocatxyz )です。 いつしかブログのメ …

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

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

Web サイト上にソースコードを綺麗に表示してくれるプラグイン SyntaxHighlighter

またしても HARIBO ではなく HALALBO を買ってしまったキャリコ( …

ロリポップから WordPress プラグイン「 SiteGuard WP Plugin 」を入れろとお達しが来た
ロリポップから WordPress プラグイン「 SiteGuard WP Plugin 」を入れろとお達しが来た

ロリポップユーザーのキャリコ( @calicocatxyz )です。 ロリポップ …