ソースコードをキレイに表示する

前回まででIllustratorによる大まかなデザインの作り込みができましたので、いよいよHTMLでデザインを実装していく段階に入ります。

今後はHTMLやCSS、JavaScriptやPHPのコードを紹介する機会も増えると思うので、これらのソースコードを記事上で綺麗に表示するためのWordPressプラグインをインストールしておこうと思います。

Crayon Syntax Highlighter をインストール

今回利用するのは「Crayon Syntax Highlighter」というプラグインです。 こちらの記事を参考にこのプラグインをインストール&有効化します。

Crayon Syntax Highlighter の設定

プラグインをインストールできたら、WordPressのダッシュボードにアクセスし、プラグインの設定を行います。

左サイドバーの「設定」→「Crayon」メニューをクリックします。

menu of Crayon

以下のような設定画面が表示されますので、必要に応じて設定を変更します(初期状態のままでも問題なく利用できます)。

default settings of Crayon

今回は以下のように変更してみました。

  • プラグインのテーマを「Classic」から「Sublime Text」に
  • フォントを「Monaco」から「Liberation Mono」に
  • サイズを 高さ400px、幅100%に(レスポンシブ対応)

設定を変更した後、画面下の「変更を保存」ボタンをクリックしたら完了です。

save settings of Crayon

プラグインを使って記事にソースコードを埋め込む

早速 Crayon を使って記事にソースコードを埋め込んでみます。

投稿の編集画面を表示し、本文のHTMLエディタの表示を「ビジュアル」から「テキスト」に変更します。

ソースコードを挿入したい箇所にカーソルを移動し、HTMLエディタの上部メニューの「crayon」ボタンをクリックします。

insert source code to post

以下のようなポップアップが表示されますので、必要な箇所を入力していきます(先ほど設定画面で設定した内容が初期値として入力された状態となっています)。

insert source code

 

最後に「挿入」をクリックすると、投稿の本文にソースコードが挿入されます(以下)。

inserted source code

 

これをプレビューでみてみるとこんな感じに。

preview source code

なかなかカッコよくソースコードが表示されます。

今後テーマ作成の過程でソースコードを書く必要がある場合は、このプラグインを使って内容を紹介していこうと思います。