ブログにCrayon Syntax Highlighterを導入してみたら、めっちゃ簡単で綺麗でした

もきち もきち 2018.02.06

こんにちは。もきちです。

このブログにCrayon Syntax Highlighterを導入してみました。
導入はめっちゃ簡単なのにソースコードが綺麗に表示されて、とても満足のいく結果となりましたのでご紹介します。

Crayon Syntax Highlighterとは
WordPressの記事でソースコードを綺麗に表記できる便利なプラグインです。
https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

ソースコードを綺麗に表示したい

当社の大半はエンジニアで、ブログを書く際にソースコードを載せることが頻繁にあります。
もちろん、それを考慮してソースコードを載せられるように対応はしていました。

しかし… ある日ブログを書いていて気づいてしまいました…。

ソースコードが大量にあると見づらい!!というか汚い!!

どうすればいい
どうすればいいっ…!ソースコードは綺麗に見せたいっ…!
でも正直めんど……忙しいっ…!

「Crayon Syntax Highlighterがおすすめだよ」

デザイナーから神の一声

デザイナーから神の一声が届きました。

Crayon Syntax Highlighterを導入する

導入を決めてからはすぐでした。設定を含めても30分以下で終わります。
まずはプラグイン「Crayon Syntax Highlighter」で検索→ インストール→ 有効化。
「設定」の「Crayon」から設定画面を開きます。

設定画面が日本語表示されない場合
設定画面が日本語で表示されない場合は、wp-content/languages/plugins内にある以下のファイルを削除してみてください。
・crayon-syntax-highlighter-ja.mo
・crayon-syntax-highlighter-ja.po

 

Crayon Syntax Highlighterの設定

設定については、初期設定の状態でも問題なく動作します。
ですが、最低限テーマはブログのイメージに合わせて変更してみましょう。
(各記事でソースコード挿入時に個別で設定することも可能です)
setting01

また、もし重いと感じる場合は、以下の設定で多少は改善されると思います。
・その他の設定の「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れる
・タグの設定で、不要なタグについてはチェックを外す
設定が終わったら、投稿画面の中にある「crayon」のボタンを押して、ソースコードを挿入するだけです。

最後に

せっかく載せたソースコードも見てもらえなければ意味がありません。
少しでも見やすく表示することで、たくさんの人に有効に活用してもらいたいですね。

もきち

書いた人

もきち

Director / Engineer

RECOMMEND