2013/06/07

SyntaxHighlighter 3.0.83 を使ってみる(前編)

今井 です

Google Apps を使い始め、ブログをBlogger上に書き始めたわけですが、ケイフィールドはソフトウェア開発会社なので、ブログ内にソースコードを書くこともあります。

ソースコードを書く時、今まで私は
<blockquote><pre><code>
ソースコード
</code></pre></blockquote>
のように書いていましたが、今使っている Blogger のテーマでは枠などもなくイマイチ。
そこで SyntaxHighlighter を使ってみる事にしました。


SyntaxHighlighter を組み込むには JavaScript や CSS ファイルをサーバに置きたいところですが、Bloggerには画像、動画以外のファイルアップロードが出来ないのでそのまま組み込むことができません。

寄付もしないでホスティング版を使うのも気が引けるのでファイルは Google Site 上に置くことにしました。


ファイル置き場は決まったので次は組込です。テンプレートをカスタマイズするのは好きじゃないけどHTMLのヘッダ部分に次のようなコードを加えます。

<link type='text/css' rel='stylesheet' href='http://***************/syntaxhighlighter/shCore.css'/>
<link type='text/css' rel='stylesheet' href='http://***************/syntaxhighlighter/shThemeDefault.css'/>
<script type='text/javascript' src='http://***************/syntaxhighlighter/shCore.js'/>
<script type='text/javascript' src='http://***************/syntaxhighlighter/shBrushXml.js'/>
<script type='text/javascript'>
SyntaxHighlighter.bloggerMode = true;
SyntaxHighlighter.all();
</script>

後はブログを書く時にソースコードを
<pre class='brush:html'>
</pre>



<script type='syntaxhighlighter' class='brush:html'><![CDATA[
]]></script>

で囲えばOK。
のはずなのですが、ダメですね。

<pre class='brush:html'>
</pre>

で囲った方はそのまま表示されるし、

<script type='syntaxhighlighter' class='brush:html'><![CDATA[
]]></script>

で囲った方は表示されない。

試しに個人で使ってるBloggerに同じように組み込んでみたらちゃんと出来たので今使ってるテンプレートと併せて使うには問題があるのかもしれません。



もう少し試してみますが、それは後編で…

2013/6/9 タイトルにSyntaxHighlighterのバージョン番号を追加しました

0 件のコメント :

コメントを投稿