2015/07/21

    jimdoでSyntaxHighlighterを使う

    2016年12月20日のjimdoのHTTPS対応への変更に伴って、ここで説明する方法ではSyntaxHighlighterがうまく動作しなくなってしまいました。

    改めて使い方をまとめたのでこちらを参照下さい。

    2016/12/22追記

     

    SyntaxHighlighterというのは、サイトにプログラムのソースコードなどを載せる時、構文を美しく色分けしてくれるJavaScriptのライブラリ。

    http://alexgorbatchev.com/SyntaxHighlighter/

     

    必要なライブラリファイルは上記サイトでホスティングされているので参照すれば自由に使えるみたい。

    http://alexgorbatchev.com/SyntaxHighlighter/hosting.html

     

     

    jimdoで使うには、以下のような手順になる。

     

    １．ヘッダーにライブラリの参照を記述

    jimdoの「設定」→「ヘッダー部分の編集」で以下のコードを追加。 

    <link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js" type="text/javascript">
</script>

<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js" type="text/javascript">
</script>

<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js" type="text/javascript">
</script>

<script language="javascript" type="text/javascript">
//<![CDATA[
SyntaxHighlighter.all();
//]]>
</script>

    最新バージョンは現時点で3.0.83だが、本サイトではエラーで動作しなかった。

    jimdoのスクリプトとの兼ね合いだと思うが自身で制御できないので、旧バージョンを使ってみた。

    ちなみに「2.1.358」の部分を「default」にしておくと常に最新バージョンが使われる。

    JavaScriptファイルのうち、shCore.jsは必須。

    その他は、利用したいソースコードに合わせて追加する。

    上記では、JAVAとXMLの２種類のソースタイプを追加している。

    利用できるタイプは下記リンクの通り。

    http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

     

     

     

    ２．ソースコードを<pre>の中に書く

    <pre>要素のclass属性に「brush: xxx」と記述する

    xxxの部分はソースタイプを判別する文字で詳細は上記リンクを参照。 

    <pre class="brush: xml">
ココにソースを記述
</pre>

     

     

    カテゴリ： サイト運営