9月 02

ソースコードの予約語をハイライト表示する方法

WordPress • プラグイン Add comments 579 PVs
Posted at 12:38 by Hiro

ブログ内で何かしらのソースコードを添付する機会が多いと思うので、プログラム言語の予約語などをハイライト表示する方法を模索していたら、WP-Syntaxという便利なプラグインを見つけました。掲載するソースをUsageに書かれているように<pre>タグで囲むだけなので使い方も簡単。

早速インストールしたので試しにC++のコードを書いてみましょう。

WordPressのエディタ上では、こんな風に書いています。

<pre lang="cpp">
#include <iostream>
using namespace std;

int main(int argc, char *argv[])
{
    cout << "Hello, world!" << endl;
    return 0;
}
</pre>

そうすると、こんな風に表示されます。

#include <iostream>
using namespace std;
 
int main(int argc, char *argv[])
{
    cout << "Hello, world!" << endl;
    return 0;
}

コードの文字色がすべて黒になるよりも、はるかに読みやすくなりますね。#include文が緑色で表示されるのがちょっと気にくわないですが…。

続いて行番号も表示させてみます。先ほどの<pre>タグにline属性を追加するだけです。

変更前： <pre lang="cpp">
変更後： <pre lang="cpp" line="1">

結果はこちら。

1
2
3
4
5
6
7
8

#include <iostream>
using namespace std;
 
int main(int argc, char *argv[])
{
    cout << "Hello, world!" << endl;
    return 0;
}

右側のボーダーラインが表示されないのに違和感があるのでスタイルシートをいじってみましたが、うまくボーダーを表示させることができませんでした…。まぁ些細なことなので、気にせずこのまま使っていこうと思います。

タグ: • •

コメントをどうぞ