*

【入れるだけ】投稿記事中のコードをキレイに表示!『Crayon Syntax Highlighter』はシンタックスハイライトをかけるプラグイン

公開日: : 最終更新日:2014/07/02 Web技術・ノウハウ, Wordpress ,

Crayon Syntax Highlighter

WordPressの投稿記事中のコードをキレイに表示できるプラグイン「Crayon Syntax Highlighter」ご紹介します。

 

Crayon Syntax Highlighter とは

投稿記事中にPHPやHTMLなどのソースコードを載せるとき、通常はコード部分をcodeタグ・preタグで囲みますよね。このタグで囲むとコード部分がある程度見やすくはなりますが(※)、プログラミング用のテキストエディタのようにキーワードに色を付ける「シンタックスハイライト」ほどのわかりやすさはありません。

Crayon Syntax Highlighterプラグインを使うと、PHP・HTMLをはじめ様々なプログラミング言語のコードにシンタックスハイライトがかかるため、コードをわかりやすくキレイに見せることができます。

※)見え方は使っているテーマによって異なります。

 

PHPやHTMLなどのソースコードをシンタックスハイライト

Crayon Syntax Highlighterがインストール・有効化されていると、PHPやHTMLなど様々なソースコードがシンタックスハイライトされて表示されます。具体的にどう見栄えが変わるかは、以下の比較をご覧ください。違いが一目瞭然です。(使用テーマはTwentyFourteen)

 

プラグイン使用前:codeタグ・preタグのみ

Crayon Syntax Highlighterを使わない状態では以下のような見え方です。

Crayon Syntax Highlighter使用前

通常の文章と見た目があまり変わりませんね。

プラグイン使用後:Crayon Syntax Highlighterによるシンタックスハイライト適用後

Crayon Syntax Highlighterを有効化すると、以下のようにシンタックスハイライトがかかります。

Crayon Syntax Highlighter使用後

こちらの方が断然コードが読みやすいですね。

このようにシンタックスハイライトでわかりやすくしてくれるのが、このプラグインの特長です。

 

使い方

1. インストール〜有効化

Crayon Syntax Highlighterプラグインをインストールして有効化します。

2. ソースコードがシンタックスハイライトされる

Crayon Syntax Highlighterプラグインを有効化していると、codeタグ・preタグで囲まれたソースコードに自動的にシンタックスハイライトがかかります。

※行番号の指定など管理画面から色々と設定することもできますが、特に何もしなくてもシンタックスハイライトが適用されるようになります。

 

ひとこと

プログラミング技術に関連したブログやWebサイトでは、記事中にコードを掲載することも少なくないのではないでしょうか?このプラグインを入れておくと、カンタンにシンタックスハイライトがかけられて便利ですよ。ブログ・Webサイトは「見る人に優しく」が基本ですから、読み手のことを考えてCrayon Syntax Highlighterを導入してみてはいかがでしょうか?

 

Crayon Syntax Highlighter

ジャンル:管理画面 > 投稿ページ

概要:ソースコードをシンタックスハイライトして表示してくれるプラグイン

 

PR

関連記事

Webサイトユーザビリティチェックリストの一部

【保存版】全訳:Webサイトユーザビリティーチェックリスト25項目

本質的な知識というものは時が経っても価値が失われません。 User Effect の 「25-

記事を読む

Simple Custom CSS

『Simple Custom CSS』はテーマをいじらずちょっとCSSを編集したいときに便利なプラグイン

CSSだけ編集したいけれどWordPressのテーマを直接編集するのは避けたい、かといって子テーマを

記事を読む

brewでmacのOpenSSLをバージョンアップ

macでローカル環境のopensslをバージョンアップする手順 〜 brewで更新→rbenvでrubyを再インストール 〜

先日自社の運営サイトのSSL証明書の更新作業をしたのですが、ローカル環境として使っているmacで

記事を読む

【Git】一つ前のcommitに戻す/他のブランチのcommitを取り込む

久しぶりにRailsでプログラムを書いている関係で、これまた久しぶりにgitを使っています。 で、

記事を読む

Code Snippets プラグイン

これでテーマの更新も怖くない!『Code Snippets』はfunctions.phpを編集できるWordPressプラグイン

WordPressのfunctions.phpファイルを直接編集せずにカスタマイズできるプラグイ

記事を読む

WordCamp2014tokyo

WordCamp2014 Tokyo に行ってきました。

もう一週間ほど経ってしまいましたが、先週末に初めてのWordCamp(WordCamp Toky

記事を読む

Intuitive Custom Post Order

ドラッグ&ドロップだけ!『Intuitive Custom Post Order』は投稿一覧のページ並び順をスイスイ変更できるプラグイン

WordPressの投稿一覧の各投稿ページをカンタンに並べ替えできるプラグイン『Intuitiv

記事を読む

Rubyで小数点第2位以下を切り捨てる方法

Rubyには標準で便利なメソッドがたくさん用意されています。数値の取り扱いについてもNumericク

記事を読む

DashboardNotePadプラグイン

付箋紙のようにメモ書きできる!『Dashboard Notepad』はWordPressのダッシュボードにメモを残せるプラグイン

WordPressで管理画面のダッシュボードにメモを残せるようになるプラグイン『Dashboar

記事を読む

Duplicated Post

『Duplicate Post』で投稿ページ・固定ページをカンタン複製

WordPressの投稿ページや固定ページを複製できるプラグイン『Duplicate Post』

記事を読む

PR

Comment

  1. […] 【入れるだけ】投稿記事中のコードをキレイに表示!『Crayon Syntax Highlighter』はシンタックスハイライトをかけるプラグイン […]

コメントを残す

PR

【Git】一つ前のcommitに戻す/他のブランチのcommitを取り込む

久しぶりにRailsでプログラムを書いている関係で、これまた久しぶりに

WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する
WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する

先日とあるお客様のWordPressサイトで「画像が表示されない」

おすすめGoogle拡張リスト
【保存版】情報収集を快適に!Chromeに入れておきたいオススメ拡張(エクステンション)8個

私はChromeをメインブラウザとして使っていますが、その理由のひとつ

Rubyで小数点第2位以下を切り捨てる方法

Rubyには標準で便利なメソッドがたくさん用意されています。数値の取り

BootstrapでWordPressサイトをレスポンシブデザイン化
【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法

  先日Googleから「4/21以降、サイトのスマホ

→もっと見る

  • feedlyでフォロー RSS登録ボタン
  • 株式会社YUKARIでは、ホームページリニューアルをメインにWeb制作事業を行っています。既存サイトへのWordPress導入・レスポンシブデザイン化からSEO強化まで何でもご相談ください。 ホームページリニューアルをお考えの方からのお問い合わせをお待ちしております。
PAGE TOP ↑