コードを綺麗に表示するためのプラグイン「 Crayon Syntax Highlighter」が秀逸

Crayon Syntax Highlighter

最近、あちこちのサイトでソースコードを分かりやすく表示しているのを見かけます。自分でブログに書くときも綺麗に表示したいと思っていたので、このブログの構築をキッカケにやってみました。

最初は、自分でCSSを書こうと思っていたのですが、調べたらプラグインが沢山あるんですね!

今日は、このブログのソース表示に使用した「Crayon Syntax Highlighter」を紹介します。

様々なプラグインがある中で、Crayon Syntax Highlighterにした理由は、次の2点です。

  1. コードをマウスで選択したときにコードのみ選択できること
  2. 色のカスタマイズができること

サイトで紹介されているコードを参考にすることも多いと思いますが、マウスで選択すると行番号まで選択されてしまうものがあります。そうすると、ペーストしたときに行番号を削除しなければならずイマイチです。なので、この点は絶対条件として探しました。

わりとすぐに見つかりました。設定画面は、日本語化されたみたいですが、一部修正が必要ということで下のサイトを参考にしました。
※バージョンが違うので修正する行番号が若干違いました。
WordPressでソースコードをハイライト表示してくれるプラグイン「Crayon Syntax Highlighter」日本語化でキレイにカラー表示!

テキストエディタで直接入力することも可能ですが、毎回使ってないと忘れちゃうんですよね!
Crayon Syntax Highlighter

でも、「Crayon Syntax Highlighter」はボタンを押すと入力画面が表示されます。ここに表示したいソースコードやタイトル、行番号の指定やマーカーの行番号、表示するテーマなどを指定するだけでOK!
Crayon Syntax Highlighterの入力画面

テーマも幾つもあり、テーマをもとに表示色をカスタマイズすることも可能です。

 

行番号を指定してマーカーを入れることもできます。
8行目をマーカー指定してしました。

 

こうなると、ついついコードを表示する記事を書きたくなりますね!
Crayon Syntax Highlighter(WordPress Plugins)

PR

関連記事