BLOG

Blitz Gateスタッフブログ

BLOG

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

書いた人:

Blog , Crayon Syntax Highlighter , HTML , Web , WordPress , プラグイン  

722_thumb

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

このブログに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」のボタンを押して、ソースコードを挿入するだけです。

最後に

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

  • このエントリーをはてなブックマークに追加