WP Code Prettifyをインストール

google-code-prettifyをWordPressで使えるようにするWP Code Prettifyというプラグインをインストールしました（プラグインの新規追加画面で検索すると出てきます）。

なお、Googleがここでライブラリーを公開していますので、導入に不安のない方の場合、プラグインをインストールしなくてもいいみたいです。

インストールしたらWP Code Prettifyを有効化して、管理画面→設定→WP Code Prettifyを開きます。

3種類のテーマが入っていますので、好きなものを選びます。

使いかたはかんたんです。preタグにクラス名をつけて囲むだけ！

使うときには、表示させたいソースコードを<pre>～</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ファイルにも英語でこまかくコメントが書いてありますが…以下の記事を参考に修正しました！

google-code-prettifyオレオレテーマ(黒背景用) [CSS][HTML] ＠試行錯誤的知的生活blog

それから、偶数行の背景色は、CSSファイルのいちばん下で指定されていました。

li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

横スクロールバーを表示させず、コードを折り返す

改行せずにソースコードを書いてみたら、スクロールバーがあらわれました。

これも無いほうがいいかな？と思い、こちらのページを参考に書き加えてみました。

CSS – white-space

pre {
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap;
    white-space: pre-wrap; 
    word-wrap: break-word; 
}

スクロールバーは無くなり、テキストが折り返しています

でもでも、スマートフォンのような幅のちいさな画面でみたときって、どっちが見やすいのでしょう？

ひとまず完成！

ちょっとカラフルすぎるかな、とも思うのですが、ひとまずカスタマイズ完了です。こんなかんじになりました。

<?php get_header(); ?>
<!-- 省略 --> 
<div class="main clearfix">
    <div class="content">
    <?php $count = 1;?> 
    <?php if (have_posts()) : ?> 
    <?php while (have_posts()) : the_post(); ?> 
    <?php 
            if ($count%2 == 0) {
            echo '<div class="even">';} 　　　　 
            else { echo '<div class="odd">';} 

こちらのほうが少し表示が早いように感じますが、CSSのコードはSyntaxHighlighter Evolvedのほうがカラフルで読みやすいようにも思います。どちらを使っていこうか、もうちょっと考えることにします。