ソースコードを色分け表示する方法

Share on Tumblr

Tweet

　専門学校でWebアプリの作り方を教えてるのですが、その授業の内容をWordPressのサイトで公開して、学生が自宅でも復習しやすい環境を作っています。

(参考画像)

　記事の中にソースコードを書くとき、最初は pre タグの内部にソースコードを埋め込んでいました。でも、XMLやHTMLなどはタグが含まれているので、いちいちエスケープして貼り付ける手間がかかっていました。

　その手間を回避するのと同時に、コードの色付け表示ができるプラグインを導入することにしました。

　SyntaxHighlighter Evolved というプラグインをインストールするだけで、コードに色付け表示したり、タグのエスケープを自動的にやってくれるなど、とても便利です。

　コードを記事の中に埋め込むには、以下のように記述します。

[java]
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
[/java]

　上記のコードは、以下のように表示されます。

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

　詳細はこちらのサイトにかかれています。ここが本家で、このライブラリを利用したプロダクトがたくさんあるようです。WordPressプラグインもそのひとつみたいです。

≫ syntaxhighlighter – Free syntax highlighter written in Java Script – Google Project Hosting

　行番号を変更したい場合は、firstline を使います。

[java firstline="15"]
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
[/java]

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

　多くのプログラミング言語に対応しています。言語に対応したAliases の欄に掲載されているキーワードを &#x5bhoge]のところに書けばいいようです。