Crayon Syntax Highlighterはテックブログ必須?ソースコードを綺麗に!

 

専門的な内容のブログを運営している方の中には、WordPressでプログラミングコード等の引用をする際、「綺麗にコードが載せられない・・・。」といった状況に陥る方もいらっしゃると思います。

 

実際、デフォルトの状態のWordPressではコードの引用等にはあまり適していません。

 

ですがプラグインの導入をすることで、プログラミングのコード引用を非常にきれいに行うことができます。

 

今回は、優秀なプラグインの一つ、「Crayon Syntax Highlighter(クレヨン・シンタックス・ハイライター)」についてご紹介します。

専門性の高い技術的なブログに重宝するプラグイン

 

「Crayon Syntax Highlighter」は、テックブログなどソースコードを多用するブログにおいて非常に有用なプラグインになります。

 

「テックブログ」とは、Webサービス、ゲームを提供・販売している会社自らが運営するブログのことです。

 

このテックブログでは、自社で使っている技術についてや具体的なコードなど、様々な専門性の高いコンテンツを提供しているブログがほとんどです。

 

また、このテックブログはブログ運営元企業のエンジニアが記述していることがほとんどなので、その企業の内情などが詳しくわかります。そのため就職先の決定や転職時にもよく読まれているようです。

 

Google、LINE、サイバーエージェントやDMMなどといった超巨大企業によるテックブログが数多く存在します。

 

こういったブログに乗っているコードを解説したりするサイトでは、ソースとなるコードを引用する必要が出てきます。

 

その際、そのままコピー&ペーストしたのではあまりに見にくくなってしまいます。

 

この問題を解消するプラグインが「Crayon Syntax Highlighter」なのです。

Crayon Syntax Highlighterの特徴

 

Crayon Syntax Highlighterは、コードエディタで表示されるソースコード同様とても見やすく表示することができます。

 

前述の通りコード等を頻繁に引用するテックブログ等では「使わなくてはもったいない」ともいえるほど優秀なプラグインです。

 

対応言語も多数取り揃えています。

  • ABAP
  • ActionScript
  • AmigaDOS
  • Apache
  • AppleScript
  • Arduino
  • Assembly
  • AutoIt
  • C
  • C#
  • C++
  • Clojure
  • CoffeeScript
  • CSS
  • Delphi/Pascal
  • Delphi Web Script
  • Diff
  • Erlang
  • Fabric Engine KL
  • Haskell
  • HTML
  • INI
  • Lisp
  • Lua
  • Maya MEL
  • Microsoft Registry
  • MIVA Script
  • Monkey
  • MS-DOS
  • MySQL
  • Java
  • JavaScript
  • Objective-C
  • Papyrus
  • Perl
  • PHP
  • PL/SQL
  • PostgreSQL
  • PowerShell
  • Python
  • R
  • Ruby
  • Rust
  • Scheme
  • Shell
  • Swift
  • Transact-SQL
  • TeX
  • Vim
  • Visual Basic
  • Visual Basic .NET
  • YAML
  • ZSH

インストール・導入方法

 

Crayon Syntax Highlighterのインストールは、通常のプラグインインストール同様に管理画面左メニューバーより行います。

 

「プラグイン」から「新規追加」を選択し、プラグイン検索窓に「Crayon Syntax Highlighter」を入力します。

先頭にプラグインが表示されるので、「今すぐインストール」をクリックします。

インストール後は「有効化」ボタンが表示されるので、クリックしてプラグインを有効化しましょう。

 

Crayon Syntax Highlighterの設定

 

Crayon Syntax Highlighterの設定は、管理画面左メニューバーの「設定」から行います。

 

「設定」から「Crayon」をクリックすると、Crayon Syntax Highlighterの設定画面が表示されます。

 

 

設定に関する指示はすべて管理画面で説明されているので、ここでは割愛します。

 

ちなみに、デフォルトでも問題なくプラグインを使用できるようになっているので細かい設定が面倒な場合や必要ない場合はこの作業を行わなくても大丈夫です。

 

Crayon Syntax Highlighterの利用方法

 

Crayon Syntax Highlighterを有効化すると、記事執筆画面に「crayon」という「コード挿入ボタン」が表示されるようになります。

これをクリックすると、以下のような設定画面が表示されるようになります。

赤枠部分はタイトルの入力、黄枠部分では言語の設定をします。

 

必要に応じて、緑枠「Settings」以下の各種設定を行います。

 

全て終わったら、青枠部分の「Add」をクリックして終了となります。

まとめ

ソースコードをきれいに表示する際に、Crayon Syntax Highlighterは非常に便利なプラグインです。

テックブログ等を記述する際はぜひ参考にしてください。

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressとTwitterの連携方法を紹介!All in One SEO...

WordPressで目次を作るプラグイン!Table of Contents P...

brBrbrは2017年版WordPressに不適?スマホで改行されない?

Post Expiratorで記事を期間限定公開に出来る!使い方は?

noself3

No Self Pingsプラグインの使い方!セルフピンバックとは?

Wordpressの作成中の記事復元方法は?リビジョンを使おう