【入れるだけ】投稿記事中のコードをキレイに表示!『Crayon Syntax Highlighter』はシンタックスハイライトをかけるプラグイン
公開日:
:
最終更新日:2014/07/02
Web技術・ノウハウ, Wordpress プラグイン, 投稿ページ
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を有効化すると、以下のようにシンタックスハイライトがかかります。
こちらの方が断然コードが読みやすいですね。
このようにシンタックスハイライトでわかりやすくしてくれるのが、このプラグインの特長です。
使い方
1. インストール〜有効化
Crayon Syntax Highlighterプラグインをインストールして有効化します。
2. ソースコードがシンタックスハイライトされる
Crayon Syntax Highlighterプラグインを有効化していると、codeタグ・preタグで囲まれたソースコードに自動的にシンタックスハイライトがかかります。
※行番号の指定など管理画面から色々と設定することもできますが、特に何もしなくてもシンタックスハイライトが適用されるようになります。
ひとこと
プログラミング技術に関連したブログやWebサイトでは、記事中にコードを掲載することも少なくないのではないでしょうか?このプラグインを入れておくと、カンタンにシンタックスハイライトがかけられて便利ですよ。ブログ・Webサイトは「見る人に優しく」が基本ですから、読み手のことを考えてCrayon Syntax Highlighterを導入してみてはいかがでしょうか?
Crayon Syntax Highlighter
ジャンル:管理画面 > 投稿ページ
概要:ソースコードをシンタックスハイライトして表示してくれるプラグイン
PR
関連記事
-
-
次のページが表示されない!WordPressでページ送りができないときの原因と対処方法
先日対応したお客様のWordPress案件で、category.phpに「同カテゴリーに属する情
-
-
【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法
先日Googleから「4/21以降、サイトのスマホ対応有無を検索結果の順位に反映
-
-
【Git】一つ前のcommitに戻す/他のブランチのcommitを取り込む
久しぶりにRailsでプログラムを書いている関係で、これまた久しぶりにgitを使っています。 で、
-
-
WordCamp2014 Tokyo に行ってきました。
もう一週間ほど経ってしまいましたが、先週末に初めてのWordCamp(WordCamp Toky
-
-
『Duplicate Post』で投稿ページ・固定ページをカンタン複製
WordPressの投稿ページや固定ページを複製できるプラグイン『Duplicate Post』
-
-
『Active Preview』で編集内容をリアルタイムプレビュー
最近使ってみたWordPressプラグイン『Active Preview』が便利だったのでご紹介しま
-
-
自作テーブルの追加からデータ取得まで!WordPressでデータをDBに保持して使う方法
WordPressでWebサイトを作ったとき、何かしらのデータをデータベース上に保持しておき必要
-
-
『Post Lists View Custom』で投稿一覧・固定ページ一覧の表示項目をカンタンON/OFF
投稿一覧・固定ページ一覧の表示項目を変えられるプラグイン『Post Lists View Cus
-
-
これでテーマの更新も怖くない!『Code Snippets』はfunctions.phpを編集できるWordPressプラグイン
WordPressのfunctions.phpファイルを直接編集せずにカスタマイズできるプラグイ
-
-
macでローカル環境のopensslをバージョンアップする手順 〜 brewで更新→rbenvでrubyを再インストール 〜
先日自社の運営サイトのSSL証明書の更新作業をしたのですが、ローカル環境として使っているmacで
Comment
[…] 【入れるだけ】投稿記事中のコードをキレイに表示!『Crayon Syntax Highlighter』はシンタックスハイライトをかけるプラグイン […]