ソースコードをきれいに表示してくれるgoogle-code-prettifyの導入メモ
これまではソースコードの表示にSyntaxHighlighter Evolvedというプラグインを使っていました。とっても便利なのですが、ちょっと表示が遅いように感じていたので、新たにgoogle-code-prettifyを使ってみることにしました。
WP Code Prettifyをインストール
google-code-prettifyをWordPressで使えるようにするWP Code Prettifyというプラグインをインストールしました(プラグインの新規追加画面で検索すると出てきます)。
なお、Googleがここでライブラリーを公開していますので、導入に不安のない方の場合、プラグインをインストールしなくてもいいみたいです。
インストールしたらWP Code Prettifyを有効化して、管理画面→設定→WP Code Prettifyを開きます。
3種類のテーマが入っていますので、好きなものを選びます。
使いかたはかんたんです。preタグにクラス名をつけて囲むだけ!
使うときには、表示させたいソースコードを<pre>~</pre>で囲めばよいのですが、以下のようにクラス名をつけます。
- 行番号なしで表示させたい場合
<pre class=”prettyprin”>ここにソースコード</pre> - 行番号ありで表示させたい場合
<pre class=”prettyprint linenums”>ここにソースコード</pre>
行番号をつけて表示させてみます。
ちゃんときれいに色分けされています!ですが、ちょっと気になるところがいくつか…。
- 左側の行番号がほとんど隠れてしまっている
- 行番号がぜんぶの行に表示されていない(5行ごとの表示)
- スクロールバーは無くていいかもしれない
- もうちょっとカラフルにしたい
CSSで見た目をカスタマイズ
行番号が隠れないようにする/スクロールバー非表示
コードの色や行番号などに関するCSSファイルは以下の場所にあります。
※テーマごとにCSSファイルが用意されていますので、他のテーマをカスタマイズする場合にはdesert.cssあるいはsunburst.cssを修正します。
また、管理画面にもCSSを追記できるところがあり(さっきテーマをえらんだところ)、あらかじめ以下の画像のようにいくつかの書き込みがあります。
ここを、わたしは次のように修正しました。
pre.prettyprint { margin: 5px; margin-bottom:4rem; padding: 10px; /*行番号が隠れないように追記*/ padding-left:40px; /*スクロールバー無しにするためにコメントアウト*/ /*max-height: 300px;*/ overflow: auto; background-color: #f8f8f8; /*かどをまるく*/ border-radius:4px; }
行番号が隠れなくなりました。
行番号を5行ごとではなくて1行ごとに表示させる
ここからはプラグインフォルダの中にあるCSSファイルを修正していきます。
prettify.cssの下の方に、このような記述があります。
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { list-style-type: none }
5行目以外には番号を振らないよう、指定されているみたいです。これをまるごと消して(コメントアウトして)しまいます。
色のカスタマイズ!
CSSファイルにも英語でこまかくコメントが書いてありますが…以下の記事を参考に修正しました!
それから、偶数行の背景色は、CSSファイルのいちばん下で指定されていました。
li.L1, li.L3, li.L5, li.L7, li.L9 { background: #eee }
横スクロールバーを表示させず、コードを折り返す
改行せずにソースコードを書いてみたら、スクロールバーがあらわれました。
これも無いほうがいいかな?と思い、こちらのページを参考に書き加えてみました。
pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; }
スクロールバーは無くなり、テキストが折り返しています
でもでも、スマートフォンのような幅のちいさな画面でみたときって、どっちが見やすいのでしょう?
ひとまず完成!
ちょっとカラフルすぎるかな、とも思うのですが、ひとまずカスタマイズ完了です。こんなかんじになりました。
';} else { echo '';}こちらのほうが少し表示が早いように感じますが、CSSのコードはSyntaxHighlighter Evolvedのほうがカラフルで読みやすいようにも思います。どちらを使っていこうか、もうちょっと考えることにします。