ブログ運営

Crayon Syntax Highlighter|サイトにソースコードを表示するプラグインと使い方

こんにちわ〜!
台風一過の気温上昇とともに、ブログ熱も上昇中のくしゃみです!

ブログをやっていると、サイトの作り込みにも熱が入りますよね〜。

とくにワードプレスだと、プラグインひとつでいろんなことができちゃうので、
ますます作り込みにも力が入っちゃいます。

いろいろ調べてる人なら見たことあると思うんですけど、
サイト内にサンプルのソースコードが表示されてるヤツ。

これこれ。

ややこしいコードの書き方を教えてもらうよりも

とりあえず答えを教えてください・・・

ってときに、ホントに助かるヤツ。
コピペするだけですごい便利。

どうやってんのかなーって思ったら、やっぱりこれもプラグインでした。

というわけで今回は、サイトにソースコードを表示させるための
プラグインのご紹介でーす。

スポンサーリンク

Crayon Syntax Highlighter

いま私が使っているのは「Crayon Syntax Highlighter」です。

ソースコード表示のプラグインはいくつかあるみたいですが、
これは表示のスタイルが変更できるので見た目にこだわる人にもおすすめです。

おれだおれだおれだおれだおれだ〜

 

いろいろありますね〜

私は背景が黒くできるものを探してたので、このプラグインに決めました。

コードが見やすくて好きなんです。

なんか、かっこよくない?

インストールと設定方法

それでは設定方法をご案内してまいりまーす。

まずは、プラグインの新規追加
「Crayon Syntax Highlighter」をインストールして有効化しちゃいましょう。

1.プラグインの設定画面へ

設定画面

「設定」から「Crayon」をクリックして設定画面へ。

設定画面

英語アレルギーの人にはしんどい画面が表示されましたね。

でも、安心してください。

履いてますよ。

設定する箇所があんまりないんです。

2.デザインテーマを選ぶ

実際にページでソースコードが表示される部分のデザインです。

いくつもあるデザインパターンから好みのものが選べます。

デザインテーマ

けっこうたくさんありますが、
選択するとプレビューも変わるので選びやすいです。

プレビュー
これにしようっと。

3.詳細設定をする

テーマ以外にも細かく表示の設定ができるんですが、
正直そんなに大きな変化はありません。

ただ、マウスオーバーでツールバーがぺろっと表示されるのが
個人的に気になっちゃったので、そこだけは変更しました。

ツールバー表示

「Toolbar」の表示設定を「Always」にすると「常時表示」に変更できます。

これは個人的な好みだと思うのでやらなくても問題ないです。

これで初期設定完了でっす。

コードを表示する方法

インストールと初期設定が終わったら、早速使ってみましょう!

イェイイェーイ

1.コード入力画面を表示する

設定が完了すると、エディタに専用のボタンが表示されるようになります。

【テキスト版】
テキスト版ボタン

【ビジュアル版】
ビジュアル版ボタン

このボタンをぽちっとクリックしてやりましょう。

ぽちっ!

2.コードを入力する

ぽちっとして表示されたウィンドウにコードを入力しましょう。

テキスト版でもビジュアル版でも表示されるウィンドウは同じですよー

コード入力

3.タイトルも表示できる

タイトルを入力すると、ツールバー部分にタイトルが表示されます。

タイトル入力欄

もちろん空欄でも問題なしです。

4.入力を完了する

入力が終わったらウィンドウ右上「Add」をクリック。

追加

エディタに反映されます。

5.修正する

できあがったらプレビューで表示を確認してみましょう。

問題がなければこれで完了ですが、
ソースコードや表示に問題があった場合は修正もできますよ。

修正する場合は、ビジュアル版での編集がオススメです。

修正・編集

青く塗られた部分が表示枠で、
はみ出てる部分はスクロールしないと見えない部分です。

テキスト版だとちょっとコードが複雑になっているので
ビジュアル版の方が直感的に修正できておすすめです。

コード内にカーソルがある状態でもう一度<>ボタンをクリックすると
詳細設定などの修正もできますよ〜

6.今度こそ完了

こんな感じに仕上がりました〜

ちゃんとタイトルもでてる〜

まとめ

設定画面が全面英語でビビりましたが、無事に目的達成できました。

めでたしめでたし。

日本語化ファイルもあるみたいですが、
設定箇所が少なかったので英語のままやっちゃいました。

日本語化するよりも設定箇所だけ覚えた方がはやいと思いまして。

必要なプラグインを入れて、管理画面がちょっとずつ自分色になっていくのって
なかなか楽しいもんですよね。

ぜひ試してみてくださーい

またおすすめのプラグインがあったらご紹介しますね!

それでは、また〜

ムズムズ度 ★ ★ ★