*

【入れるだけ】投稿記事中のコードをキレイに表示!『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

関連記事

git3

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

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

記事を読む

Duplicated Post

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

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

記事を読む

post-lists-view-custom

『Post Lists View Custom』で投稿一覧・固定ページ一覧の表示項目をカンタンON/OFF

投稿一覧・固定ページ一覧の表示項目を変えられるプラグイン『Post Lists View Cus

記事を読む

BootstrapでWordPressサイトをレスポンシブデザイン化

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

  先日Googleから「4/21以降、サイトのスマホ対応有無を検索結果の順位に反映

記事を読む

Intuitive Custom Post Order

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

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

記事を読む

number-703136_640

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

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

記事を読む

Public Post Previewプラグイン

公開前のページを第三者にシェア!『Public Post Preview』は下書きページへの共有リンクを発行できるプラグイン

公開前のページを第三者に確認してもらうのに便利なプラグイン『Public Post Previe

記事を読む

Code Snippets プラグイン

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

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

記事を読む

WordPressにテーブルを追加する方法

自作テーブルの追加からデータ取得まで!WordPressでデータをDBに保持して使う方法

WordPressでWebサイトを作ったとき、何かしらのデータをデータベース上に保持しておき必要

記事を読む

WordPressでページ送りができない

次のページが表示されない!WordPressでページ送りができないときの原因と対処方法

先日対応したお客様のWordPress案件で、category.phpに「同カテゴリーに属する情

記事を読む

PR

Comment

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

コメントを残す

PR

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

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

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

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

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

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

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

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

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

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

→もっと見る

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