WordPressプラグイン「Crayon Syntax Highlighter」でソースコードをキレイに表示

シェアしてもらえると励みになります!

Aug 28 2015crayon syntax highlighter2

みっきぃ(@miki73_m)です。WordPressの記事内にソースコードを載せたかったのですが、上手く表示できませんでした。ブログを見ているとカッコよくコードを載せている人がいますよね。私もカッコよく、キレイにソースコードを表示したいと思いWordPressのプラグインを導入しました。

WordPressでソースコードを綺麗に表示できる「Crayon Syntax Highlighter」プラグイン

参考にしたのはゆうきくん@カフェブロガー(@starlod_twtr)さんの記事。タグについてもわかりやすく書いてあるのでとても役立ちました。ありがとうございます。

Crayon Syntax Highlighter導入方法

Aug 28 2015crayon syntax highlighter1

WordPressの管理画面ープラグインー新規追加から「Crayon Syntax Highlighter」を検索し、インストール、有効化します。

WordPress › Crayon Syntax Highlighter « WordPress Plugins

こちらからもダウンロードできます。

有効化が終わったら、WordPress管理画面ーCrayonをクリックし、設定画面へ。ここで細かく設定できます。

私はテーマを「Sublime Text」へ、ツールバーを「常に表示」にしました。細かく設定できますが、よくわからないので、あまりイジっていませんw

WordPressでソースコードを綺麗に表示できる「Crayon Syntax Highlighter」プラグイン

詳しくはゆうきくん@カフェブロガー(@starlod_twtr)の記事を見て下さい。


使い方

使い方は、ソースコードをpreタグで囲みます。

<pre>preタグで囲む</pre>

かんたんですね。

はてな風ブログカードのブックマークレットを導入してみた

みっきぃ(@miki73_m)です。前回「Emdedlyカード」について紹介しました。↓こんな感じ「Embedlyカード」がはてなブログカードと違ってまたいい感じはてな風ブログカードと差別化しようと思って取り入れたのです

こちらの記事で使ってみました。

あとがき

profile

ソースコードをキレイに表示するWordPressプラグイン「Crayon Syntax Highlighter」を紹介しました。preタグで囲むだけですし、テーマも豊富なのでオススメです。

以上、みっきぃ(@miki73_m)でした。