ブログでソースコードをハイライト表示するやり方はいくつかありますが、今回はGoogle Code Prettifyを使いハイライトする方法をメモしておきます。
Google Code Prettifyの使い方
Google Code Prettifyの使い方を順を追って書いていきます。
Google Code Prettifyの導入
CDNをブログ等で読み込みます。これだけで使えるようになります
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
Google Code Prettifyを使ったコード表示
例として、おなじみのJavaのHello Worldを例に書いてみます。
public class HelloWorld{
public static void main(String[] args){
System.out.println("Hello World!!");
}
}
コレをGoogle Code Prettifyで表示するには、このように<pre class="prettyprint">で囲みます。
<pre class="prettyprint">
public class HelloWorld{
public static void main(String[] args){
System.out.println("Hello World!!");
}
}
</pre>
すると、このようにハイライトされて表示されます。
public class HelloWorld{ public static void main(String[] args){ System.out.println("Hello World!!"); } }
まとめ
導入も簡単で使い勝手もいいです。
興味があれば、Google Code Prettify使ってみてください!