デザインとプログラムの狭間で: bloggerにSyntaxHighlighterをインストールする

技術メモなのでシンタックスハイライターは必須ですからして初めにインストールしておきます。

今回インストールするのは、SyntaxHighlighter - Alex Gorbatchevにしました。バージョンは3.0.83です。ファイルのホスティングもしておられるので有り難く使用させていただきます。

Syntax Highlighter

簡単インストール

ダッシュボード > デザイン > HTMLの編集へ移動
テンプレートをすべてダウンロード
<head>内に以下のソースをコピーしてペースト（テーマとブラシは必要なものを記述。）
テンプレートを保存して、ファイルをアップロードすれば完了

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

簡単な使い方

<pre />タグを使う

<pre>タグで記述する場合は、<は、<に、>は>エスケープすること。

<pre class="brush: js">
...code
</pre>

<script />タグを使う

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
...core
]]></script>

備考

バージョン3.0.83からshAutoloader.jsが導入されているが今回は未使用。

2011年2月7日月曜日

bloggerにSyntaxHighlighterをインストールする

簡単インストール

簡単な使い方

<pre />タグを使う

<script />タグを使う

備考