SyntaxHighlighterをWordPress以外で簡単に使う方法
ウェブサイト上にソースコードをきれいに表示するライブラリで有名なSyntaxHighlighterを、Wordpress以外の通常のウェブサイトで簡単に使う方法を紹介します。
はじめに
ウェブサイト上にソースコードをきれいに表示するライブラリで有名なSyntaxHighlighterですが、Wordpressで利用する場合は公開されている専用のプラグインをインストールするだけで簡単に利用できますが、Wordpressを利用しない通常のウェブサイトで利用する場合では若干面倒だったので、今回は簡単に使う方法を紹介したいと思います。
SyntaxHighlighterとは
ウェブサイト上にソースコードをきれいに表示するためのライブラリで、同じようなライブラリは他にもありますが、機能の多さではSyntaxHighlighterが一番かと思います。
参考までにJavaで記述されたプログラムをSyntaxHighlighterを使って表示させるとこんな感じです。（ソースはただのサンプルです）
言語に応じて予約語やコメントがきれいに色分け表示させることが可能です。
対応言語は以下の通りで、メジャーなプログラミング言語には一通り対応していると思います。
SyntaxHighlighter – Bundled Brushes
実際このブログのソースコードを表示する際もSyntaxHighlighterを利用しています。
この度、Wordpressを利用していない通常の静的なウェブページ上でSyntaxHighlighterを利用することになり調べていたところ、正規の方法ではnode.jsを利用してファイル群を生成するような感じでちょっとめんどくさそうでした。（実際には試していないですが）
わざわざnode.jsインストールするのはちょっと・・ということで、別の方法で簡単に導入できる方法を見つけたので備忘がてらまとめたいと思います。
SyntaxHighlighterをウェブサイトに簡単に導入する方法
簡単に導入する方法は、ホスティングされているソースファイルの中から必要なファイル群を直接読み込むです。
ホスティングされているファイルは以下のサイトにまとめてあったので、必要なファイルを下記から探して直接読み込む感じです。
SyntaxHighlighterを利用するうえで最低限必要なファイルは以下の通りです。（minify化していない通常版でも同じです）
- shCore.min.css
- shThemeDefault.min.css
- shCore.min.js
- shBrushXXX.min.js（言語毎のJavascriptファイルで例えばJavaを表示させたい場合はshBrushJava.min.js）
言語毎のファイルは利用する言語に応じて変更してください。
HTMLタグで書くと以下のような感じかと思います。
言語毎のファイル（shBrushXXX.min.js）よりも前にshCore.min.jsを読み込んでおく必要があるので注意してください。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css" rel="stylesheet" type="text/css" />
<!-- 先に読み込む！ -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2FSyntaxHighlighter%2F3.0.83%2Fscripts%2FshCore.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2FSyntaxHighlighter%2F3.0.83%2Fscripts%2FshBrushJava.min.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<pre class="brush: java">
class HelloSyntaxHighlighter {
/**
* SyntaxHighlighter表示確認用サンプル
*
* @param args 引数
*/
public static void main(String[] args) {
String message = "Hello SyntaxHighlighter!";
System.out.println(message); // メッセージ出力
/*
複数行コメント
*/
int i = 0;
int j = 1;
if(i > j){
System.out.println("iの方が大きい");
}
}
}
</pre>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20SyntaxHighlighter.all()%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>