コマンドやプログラムコードを綺麗に表示してくれるwordpressプラグイン「Crayon Syntax Highlighter」


コマンドやプログラムコードを綺麗に表示してくれるwordpressプラグイン「Crayon Syntax Highlighter」

当ブログではコマンドやプログラムのコードを紹介してこともあるかと思っています。

これまで何度か紹介してきましたが、失敗したなーと感じるのはコマンドやプログラムコードを綺麗に表示してくれるwordpressプラグインを使用してこなかったこと。すっかり忘れていました。

使いやすくてオススメなプラグイン「Crayon Syntax Highlighter」

プラグインは他にも「SyntaxHighlighter Evolved」というものもありますが、編集のしやすさから「Crayon Syntax Highlighter」をオススメします。

Crayon Syntax Highlighterのインストール方法

「プラグインを追加」画面から追加していきます。同画面で「Crayon Syntax Highlighter」と入力します。

crayon-syntax-highlighter-1

「今すぐインストール」をクリックします。以下の画面ではインストールが始まっています。crayon-syntax-highlighter-2

インストール完了後「有効化」をクリックします。crayon-syntax-highlighter-3

以上でインストール完了です。

Crayon Syntax Highlighterの使用方法

使用方法はとっても簡単。まずは投稿画面を「ビジュアル」モードにしましょう。

以下の画像の赤で囲った「<>」の箇所をクリックします。 crayon-syntax-highlighter-4

以下の画面が表示されます。ここで「プログラム言語」を選択し、「コード」を記載します。プログラム言語は変更せず、コードのみ記入しました。記入後に「挿入」をクリックします。

crayon-syntax-highlighter-5

以下のように

crayon-syntax-highlighter-6

これで完了です。簡単ですよね。

Crayon Syntax Highlighterで選択できる言語

Crayon Syntax Highlighterで選択できる言語は非常に多岐に渡っています。CやC++はもちろん、CSS、Go、Java、Ruby、Swiftなどなど。聞いたことのない言語にも対応しています。

以下、スクロールの上から順に画面をキャプチャしました。ここには馴染みのない言語が並びます。

crayon-syntax-highlighter-11

続いて、CやC++、CSSなどがあるのがわかります。

crayon-syntax-highlighter-7

さらに続いて、JavaやJavaScript、Objective-Cがあるのがわかります。

crayon-syntax-highlighter-8

以下ではPHPやRubyが表示されています。

crayon-syntax-highlighter-9

こちらがスクロールの一番下。ScalaやSwiftやXHTMLがありますね。

crayon-syntax-highlighter-10

まとめ

このように多種多様なわけです。とはいえ、どの言語を選択しても表示方法はそれほど変わりません。AIXやLinuxのコマンドラインの場合もそうですが、「Default」で使用して問題ないかと思います。

スポンサーリンク
ad-1
ad-1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする