Crayon Syntax Highlighterを用いて記事内にソースコードを綺麗に埋め込む

      2016/03/08

 

記事を書けば書くほど疑問点や問題点にぶち当たるKaaazです。前回の記事

 

を書いている最中にも、やはり問題にぶち当たりました。それは、

 

「皆さんはどうやって自分の記事内にあんな風にきれいにソースコードを表示しているのか?」

 

ということでした。前回参考にさせていただいたサイトを始め、多少の形式の違いはあるものの、皆さん非常にきれいにソースコードをブログ内に埋め込んでいらっしゃいます。でも、自分ではどうやって良いか如何とも分からない・・・。ブログ開設1ヶ月の初心者なんてこんなもんです。

 

そこで色々と調べた結果、プラグインの「Crayon Syntax Highlighter」を用いれば、どうやら思った通りの埋め込みができそうであることが分かりました。そして、実際に前回の記事を書いている最中にこれをインストールして設定し、無事にソースコードを綺麗に埋め込むことができました。ですので、今回はこのCrayon Syntax Highlighterについてのお話をしたいと思います。

 

スポンサード リンク

 

Crayon Syntax Highlighter

 

Crayon Syntax Highlighterとは

 

詳しくは、

 

をご覧ください。英語だらけですが。多くのブログやサイトで用いられているため、見れば「ああ!あれね!」と思われる方は多いと思います。調べる限り、似たようなプラグインはたくさんあるようで、正直初心者の私には違いがそこまで分かりません。ただ、ちょっといじった感想としては、

  • 操作が楽ちん
  • 記事内に埋め込まれたソースコードの表示が綺麗

といった感じで、初心者としてはもうこれだけで十分嬉しいです。これから使っていくうちに別のプラグインが良ければ変更するかも知れませんが、まずはしばらくこのまま使ってみようと思っています。

 

 

インストール

 

インストール自体は通常のプラグインと同様の手順です。まずは、「プラグイン」→「新規追加」を選択し、Crayon Syntax Highlighterを検索します。すると、以下のように検索されますので、「今すぐインストール」をクリックします。

スクリーンショット 2016-02-28 2.51.11

 

 

インストールが完了すると以下のように表示されます。プラグインの有効化を忘れずに行いましょう。下の方にある「プラグインを有効化」をクリックします。

スクリーンショット 2016-02-28 2.51.45

 

プラグインの有効化が無事に終わると、以下のように表示されます。

スクリーンショット 2016-02-28 2.52.02

 

 

設定

 

有効化が済みましたら、次に「設定」→「Crayon」からCrayon Syntax Highlighterの設定を行っていきます。とは言っても、正直使い心地を見ながらでないとどうにもこうにも分からない部分が多いため、現在は基本的にはデフォルトのままで使用しています。

スクリーンショット 2016-02-28 2.53.12

 

ただ、他のサイトを見ていて思ったことが一点だけあります。それは、マウスオーバー時にツールバーが表示される設定だと、ソースコードを選択する際に非常に邪魔になるということです。ですので、今回はこれだけ変更しました。

スクリーンショット 2016-02-28 2.53.31

 

以下のように、ドロップダウンから「常に表示」を選択しました。これで、ツールバーは常に表示される設定になりましたので、マウスオーバーにより出たり消えたりするような煩わしい事態にはならないはずです。

スクリーンショット 2016-02-28 2.53.52

 

設定が終わりましたら、忘れずに「変更を保存」をクリックしましょう。そうしないと設定が保存されません。

スクリーンショット 2016-02-28 2.56.46

 

 

使用方法

 

先に述べたとおり、操作が直感的で、初心者でも非常に簡単に利用できます。Crayon Syntax Highlighterが無事にインストールされると、投稿画面の「テキスト」入力フォーム上に「crayon」が配置されます。記事内にソースコードを埋め込む場合は、単純にこれをクリックします。

Crayon

 

すると、以下のようなポップアップが表示されますので、「コード」の部分にソースコードを記入し、あとは「挿入」を押すだけです。

スクリーンショット 2016-02-28 2.57.28

 

すると、無事に以下のように綺麗にソースコードを埋め込むことができました。これは本当に簡単ですね。

 

 

今回は以上になります。なお、今回の記事を作成するにあたっては、「i.Design」様の

 

を大変参考にさせていただきました。心より感謝申し上げます。

 

スポンサード リンク

 

 

関連記事

 

 

 




当ブログにお越しいただきありがとうございます。

下記ランキングサイトに登録して勉強中です。

ブログ発展のため、下記クリックにどうかご協力ください。

よろしくお願いします!

 ↓ ↓ ↓   ↓ ↓ ↓

ブログランキング・にほんブログ村へ


ここまでお読みいただきありがとうございます


気に入っていただけましたら
「フォロー」「いいね!」をお願いいたします!

あなたにオススメの記事はこちら!

 - カスタマイズ, ブログ