KUHAKU
no
MEMOCHO

ブログ上でのソースコード表示をエディタ風にカスタマイズする方法【Crayon Syntax Highlighteの使い方】

ブログ上でのソースコード表示をエディタ風にカスタマイズする方法【Crayon Syntax Highlighteの使い方】のサムネイル

初めましての投稿になります。
少しプライベートな時間が増えたので急遽ブログでも始めてみようかと思いましたので作ってみました。

今後はワードプレスを中心に自分がちょくちょく忘れてしまう事などをメモ帳代わりに書いていきます。
あまり人に見られることを意識して書かないので、読みにくいとかあると思いますがごめんなさい。。。

そういう時はガンガンコメントで文句をください。笑

早速、第一投目はソースコードのエディタ風表示について書いていきたいと思います。

コードの表示方法

プログラミング系のブログを書こうと思った時に欠かせないのがなんといってもソースコードの表示です。
これがないと何の説明もできないし何のメモにもならないので、当ブログでも実装がてら記事を書いていこうと思います。

コードの表示については通常HTMLのpre,codeタグを以下のように使用します。

しかし、上記のコードを使用しただけでは残念ながらお世辞にもきれいとは言えない状態でのソース表示しかされません。

ワードプレスプラグイン Crayon Syntax Highlighte

そこで、jQueryプラグインやらなんやらを使ってみた目を綺麗にしていくわけですが、今回はブログといえばワードプレス!という勝手な偏見からワードプレスを使用される際にコードをカンタンに綺麗に表示するプラグインの使用方法をご紹介していこうかと思います。

その名も「Crayon Syntax Highlighte

プラグインのダウンロード

まずはプラグインのダウンロードから行っていきます。

Crayon Syntax Highlighter
ja.wordpress.org

↑↑
こちらからダウンロードをするか、プラグインの新規追加から検索をかけても出できますのでお好きな手順でプラグインをゲット。
ダウンロードが終わったらプラグインを有効化します。

初心者の方だとあまりないですがなれてくるとプラグインをダウンロードしたはいいものの有効化するのを忘れて「あれれ?」なんて自体がよくあります。(自分のことです)

プラグインの設定

有効化が完了したら「設定」から「Crayon」という項目を探してクリック。

そうすると何やら英語まみれのよくわかんなっ!っていう画面が出てきますが落ち着きましょう

焦ることはないです。こういうものは上から順番に触っていけば何とかなるものです。

テーマ・デザインの決定

まずは一番上の「Theme」というところを見ていきましょう。

なにやらセレクトボックスがありますのでクリックしてみましょう。
ここでは使用するデザインのテーマが選べます

僕は普段使用しているエディタがSublime textなのでそのまま選びました。。

その他のボタンやチェックボックスはそのままのほうが何かと便利なのでスルーしましょう

フォントの設定

テーマを選び終わったら画像のソースコードの部分がお好みのデザインに切り替わっていると思います。
ここまで来たらもうほぼ設定完了みたいなものなので細かい設定を進めていきます。

すぐ下の「Font」というところでフォントの設定ができます。
お好みのフォントを選んだらあとはフォントサイズやら行間やらを設定できますが基本めんどくさいのでこのままいきます。

そのすぐ下、「Metrics」はそのままで大丈夫です。

ツールバーの設定

さて、ここまで出来たら満足するものが出来上がっていると思いますが、上部のプレビューを見てみてください。
人によってはマウスオーバー時の上部に表示されるツールバーがうっとおしいと思う方もいると思うます。

そんなときはサクッと非表示にしちゃいましょう

「Toolbar」という項目のDisplay the Toolbarの後のセレクトボックスをクリックするとマウスオーバー時・常時・なしの三択で選べます。
ここは迷わずなしの「Never」を選択しましょう。

これでうっとおしいマウスオーバー時の演出が消えました。

言語の設定

最後は使用言語の設定をしていきます。
「Languages」という項目を探し出してください。
ここではワードプレスを使用する方に向けて書いているのでおそらくPHPが妥当かと思います。

コチラの設定は後で変更できるので何も考えずPHPを選択しましょう。

以上で一通りの設定は完了です。「Save Changes」をポチッとします。すぐ隣にリセットボタンがあるのでそちらを押さないようにお気を付けを!

その他の設定は特に触らなくていいかと思いますので触る必要が出てきたときか暇なときに解説したいと思います。

記事を書く

設定が終わりましたら早速記事を書いてみましょう!

通常通りpreタグ、codeタグを使用して書くだけでさきほどの設定が反映されます。

投稿画面で設定の変更

もう普通にタグを使って書くだけで反映はされますが、いつもいつもPHPばかりという偏った投稿はあまりないと思うので他言語を書きたくなった際の設定の変更方法を少々書いて終わりにしたいと思います。

このプラグインはいたって便利に作られていまして、記事のエディタにとても便利なボタンが自動で挿入されます。

このクイックタグを押すと設定項目がたくさん出てきますのでこのようにデザインテーマやフォント、使用言語等も簡単に変えられます。

以上、コード表示のエディタ風カスタマイズのご紹介でした。

今回はワードプレスのプラグイン「Crayon Syntax Highlighte」をご紹介しましたが、中にはワードプレスを使用されていない方も沢山いらっしゃると思うので、jQueryプラグインやCSSのみを使用した方法なども後々ご紹介していこうかと思います。

それではまた次回の投稿で!

FB Comment