WORDPRESS にソースコード整形プラグインをインストール

https://www.typea.info/blog/index.php/2010/12/07/wordpress_chromeブログにソースコードを記述する場合、きれいに表示させられるとうれしい。

Syntax Highlighter が、行番号も表示されたり、見た目はきれいでよさげなのだが、対象となる言語を指定しないといけない。

google-code-prettify は、Syntax Highlighter に比べると控えめで、コードの色分け程度だが、いちいち対象言語を指定する必要が無く、CSS クラスに prettyprint を指定するだけなので楽でよい。

インストール

以下の手順で、WordPress に、google-code-prettify のプラグインを導入してみる。

ダウンロードのURLを指定し、wget でダウンロード
解凍
WordPress ディレクトリ(例ではblog) の/wp-content/plugins/ にコピー
管理画面から有効化

# wget http://www.deanlee.cn/downloads/google_code_prettify_v1.1.zip
# unzip google_code_prettify_v1.1.zip
# mv google_code_prettify /var/www/html/blog/wp-content/plugins/

使用法

実際に使うには、ブログ記事のソースを pre タグで囲み、class 属性に、prettyprint を指定する。

<pre class="prettyprint linenums"> 
    ここにソースコードを記述する。 
</pre>

または、

<code class="prettyprint"> 
    ここにソースコードを記述する。 
</code>

試しに、ソースを貼ってみる。

package info.typea;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class TouchActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TouchView view = new TouchView(this);
        setContentView(view);
    }
}

class TouchView extends View {
    private static final String TAG = "Touch";
    private List
 points = new ArrayList
();

    public TouchView(Context context) {
        super(context);
        setFocusable(true);
        Log.i(TAG ,"View Constructed.");
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Point point = new Point();

        point.x = (int) event.getX();
        point.y = (int) event.getY();
        points.add(point);

        this.invalidate();

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {a
        canvas.drawColor(Color.WHITE);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);

        for (Point point : points) {
            //Log.i(TAG,String.format("x=%d, y=%d", point.x, point.y));
            canvas.drawCircle(point.x, point.y, 10, paint);
        }
    }
}

注意点として、

HTMLの特殊文字、特に<、> は、pre タグの中でも <、> 等にエスケープする必要がある
IEではまともに動かない(改行が無くなってしまう)
HTMLタグ(XML)を pre で利用できない(?) 今回、実際にタグとして認識されてしまった。code を使う必要があるかも

Movable Type と、FreeStyleWiki を使った自分のサイトでは、IE7 未満のブラウザには適用しないように、またIE7互換モードで表示するように、script タグの中に、jQuery を利用して以下の記述を行っている。

    $(document).ready(function(){
        if ($.browser.msie && $.browser.version < 7) {
            // NOP
        } else {
            var meta = $("head").add("meta");
            meta.attr("http-equiv","X-UA-Compatible");
            meta.attr("content","IE=EmulateIE7");

            prettyPrint();
        }
    });

WordPress のプラグインではどう対処しようかしら。

追記

Chrome でシンタックスハイライトが効かない場合

Follow me!

@pppiroto