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


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


(参考画像)
code-highlight

 記事の中にソースコードを書くとき、最初は 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]のところに書けばいいようです。

Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt
Related Posts Plugin for WordPress, Blogger...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です