Crayon Syntax Highlighterでソースコードを表示するとカッコいい

2014年12月19日

前記事の「ブログの動画をスマホで見たら幅がでかすぎて困った話」でCSSの記述をしましたが、ワードプレスでソースコードの記述を記事上でエディタ風に表示しているサイトが多いので真似してみたいと思いました。

結果から言うと「Crayon Syntax Highlighter」というプラグインを使えば簡単でしたというお話。

Crayon Syntax Highlighterの使いかた

わかりやすくて参考になったサイトはこちら↓

 

個人的にはプラグインを有効化すれば設定はほとんどデフォルトでOKですね。

唯一変更した項目はツールバーの表示で、前記事では表示しない設定にしました。デフォルトだとマウスオーバー時にツールバーが表示されます。

こんな感じ↓

なんかちょっとウザかったので、ツールバーは表示しない設定にしました。

最も簡単な使い方としては、

ワードプレスにCrayon Syntax Highlighterをインストールするとテキストエディタに表示される「crayon」クリック。

「コード」の欄に表示したいコードを記入。

ツールバーを表示しないに設定。（個人的に好みなだけですので、真似しなくてOKです）

あとは右上の「挿入」をクリックすれば完了です。

細かい設定もできますし、見た目のことも考えればいろいろ弄ってみるのも面白そうですが、ここに時間かける必要性は感じないので個人的にはこれでOKです。

見てくれる人に伝わることが大事ですので、見やすければOKというスタンスです。めんどくさいというのもあるけどね。