ソースコードをきれいに表示してくれるgoogle-code-prettifyの導入メモ

photo credit: VickyTH via photopin cc
photo credit: VickyTH via photopin cc
Update Web制作メモ >

これまではソースコードの表示にSyntaxHighlighter Evolvedというプラグインを使っていました。とっても便利なのですが、ちょっと表示が遅いように感じていたので、新たにgoogle-code-prettifyを使ってみることにしました。

WP Code Prettifyをインストール

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

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

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

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

SnapCrab NoName 2013 4 22 17 35 46 No 001 600x3331 400x300

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

使うときには、表示させたいソースコードを<pre>~</pre>で囲めばよいのですが、以下のようにクラス名をつけます。

  • 行番号なしで表示させたい場合
    <pre class=”prettyprin”>ここにソースコード</pre>
  • 行番号ありで表示させたい場合
    <pre class=”prettyprint linenums”>ここにソースコード</pre>

行番号をつけて表示させてみます。

SnapCrab NoName 2013 4 22 17 26 24 No 00 600x316

ちゃんときれいに色分けされています!ですが、ちょっと気になるところがいくつか…。

  • 左側の行番号がほとんど隠れてしまっている
  • 行番号がぜんぶの行に表示されていない(5行ごとの表示)
  • スクロールバーは無くていいかもしれない
  • もうちょっとカラフルにしたい

CSSで見た目をカスタマイズ

行番号が隠れないようにする/スクロールバー非表示

コードの色や行番号などに関するCSSファイルは以下の場所にあります。

…/wp-content/plugins/wp-code-prettify/css/prettify.css

※テーマごとにCSSファイルが用意されていますので、他のテーマをカスタマイズする場合にはdesert.cssあるいはsunburst.cssを修正します。

また、管理画面にもCSSを追記できるところがあり(さっきテーマをえらんだところ)、あらかじめ以下の画像のようにいくつかの書き込みがあります。

SnapCrab NoName 2013 4 22 17 35 46 No 01 400x300

ここを、わたしは次のように修正しました。

pre.prettyprint {
margin: 5px;
margin-bottom:4rem; 
padding: 10px; 

/*行番号が隠れないように追記*/ 
padding-left:40px; 

/*スクロールバー無しにするためにコメントアウト*/ 
/*max-height: 300px;*/ 
overflow: auto; 
background-color: #f8f8f8; 

/*かどをまるく*/
border-radius:4px;
}

行番号が隠れなくなりました。

SnapCrab NoName 2013 4 22 17 39 7 No 00

行番号を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行目以外には番号を振らないよう、指定されているみたいです。これをまるごと消して(コメントアウトして)しまいます。

SnapCrab NoName 2013 4 22 17 40 43 No 00

色のカスタマイズ!

CSSファイルにも英語でこまかくコメントが書いてありますが…以下の記事を参考に修正しました!

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

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

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

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

SnapCrab NoName 2013 4 22 18 13 50 No 00 600x138

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

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

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

SnapCrab NoName 2013 4 22 18 14 27 No 00 600x149

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

ひとまず完成!

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

<?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のほうがカラフルで読みやすいようにも思います。どちらを使っていこうか、もうちょっと考えることにします。