すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

はてなブログでソースコードのシンタックスハイライトをする方法まとめ

f:id:Suzushin:20170429140030j:plain

こんにちは、すずしんです。

私のブログの場合、プログラムのソースコードを記事に掲載することがあります。
その中で、掲載するソースコードはハイライトされて表示されると良いなと考えました。
ちょっと調べてみたところ、はてなブログでは標準でシンタックスハイライトがサポートされているということが分かりました。

というわけで、今回の記事では、はてなブログでプログラムのソースコードをシンタックスハイライトする方法について記事にまとめておこうと思います。
もしやり方を忘れてしまった際には備忘録にもなりますので。

シンタックスハイライトとは?

シンタックスハイライトというのは、プログラムなどのソースコードを構文(シンタックス)に応じて色付け表示する(ハイライト)機能のことをいいます。
このシンタックスハイライトを利用することで、記事に掲載したソースコードの構成が分かりやすくなり、スッキリと読みやすくなります。

シンタックスハイライトではない状態でソースコードを貼り付けると、例えば以下のようになります。

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

まぁこれでも一応ソースコードは読めますので悪くはありませんが…。
これをシンタックスハイライトさせてみると以下のようになります。

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

どうでしょうか?
構文ごとに色分けされていると、スッキリと読みやすくなりますよね!

はてなブログでシンタックスハイライトする方法

はてなブログでシンタックスハイライトをしたい場合、編集画面が「はてな記法」モードまたは「Markdown」モードのときに利用できます。

はてな記法でシンタックスハイライト

はてな記法では、スーパーpre記法で先頭の>||の2本のパイプ(||)の間にファイルタイプを指定します。
例えばJavaの場合には以下のようになります。

>|java|
(ソースコード)
||<

Markdown記法でシンタックスハイライト

Markdown記法では、バッククオート(`)を3つ続けた```で囲まれたコードブロックにおいて、先頭のバッククォートの最後にファイルタイプを指定します。
Javaの場合では以下のようになります。

'''java
(ソースコード)
'''

ひとこと

はてなブログでは、標準でシンタックスハイライトがサポートされているというのが嬉しいですね!
私も今後積極的に使っていきたいと思っています。

あなたも、もしはてなブログでソースコードを掲載することがあるのなら…。
このシンタックスハイライトを利用してみてはいかがでしょうか?