WordPressでhtml等のソースコードの記事を書くプラグイン

ソースコードの記入例を記事に書きたい

プログラムは魔法ではない…

Webデザイナーやプログラマーさんはよく紹介記事や備忘録の為にWordpressでブログを開設してますよね。(仕事柄そういう方のブログを見るだけかもしれませんが…)

で、ソースコードの記入例なんてのをブログに載せてるわけですが…

ソースコードの記入例を載せるのに使われてる人気のプラグインがこれ、

「Crayon Syntax Highlighter」

 

プラグイン検索してインストール、有効可すればすぐに使えます。

使い方

有効化すれば記事を編集する時のメニューにタグっぽいアイコンが出ています。

タグっぽいアイコン

タグっぽいアイコンをクリックすると、モーダルダイアログっぽいのがが出て来ますので、

そこにソースコードを入力、

Crayonのダイアログ

「挿入」か「キャンセル」のボタンクリックでダイアログを閉じれるんですが、

これが右上にあるのがワタクシとしては使いにくいなと思ったくらいで、

そこに慣れれば便利便利♪

こういう記事を書くならWordpressって便利だな…って思いました。

もしCMSの入ってないhtmlに直にソースコードの記入例なんて書いたら

そもそも特殊文字使って頑張らないとソースコードとして表示されないし…

 

Crayon Syntax Highlighterテーマ一覧

Crayon Syntax Highlighterにはデフォルトでかなりのテーマが入っていて、

色々試しても良いんですけどぱっと見一覧ページがあるといいなと思ったのでここにメモっときます。

1c kod

1c  Zapros

809 finest

Ado

Arduino Ide

Bncplusplus

Capacitacionti

Cg Cookie

Cisco Router

Clasic

Coda Special Board

Dark Terminal

Eclipse

Epicgeeks

Familiar

Feeldesign

Github

Idle

Inlellij Idea

Iris Vfx

Light Abite

Mirc Dark

Monokai

Neon

Obsidian

Obsidian Light

Onderka15

Orange Code

Powershell Ise

Pspad

Raygun

Secrets Of Rock

Shell Default

Solarized Dark

Solarized Light

Son Of Obsidian

Ssms2012

Sublime Text

Terminal

Tomorrow

Tomorrow Night

Turnwall

Twilight

Visual Assist

Vs2012

Vs2012 Black

X3info

個人的には Twilight 辺りが好きですね。

エディターの背景が黒いのに慣れてるんで、

ソースコードで背景白いとなんか目がしょぼしょぼするんですよね…

毎度毎度設定してもそれはそれでいいのですが、

「  設定 > Crayon 」から規定値を変更する事が出来ます。

※一応設定のドロップダウンで選択すると見た目確認出来るんですけどね(笑)

ドロップダウンで選択しないと見た目が分からないって結構手間なんだよなぁ…

コメントを残す

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