2011年6月14日火曜日

BloggerにSyntaxHighlighterを追加する方法

ソースコードを載せたブログを書きたくて、SyntaxHighlighterを導入しました。
SyntaxHighlighterは各種ソースを読みやく表示します。

いろいろ検索したところ、下記を</head>の直前に入れると良いようです。
今回入れるのは、SyntaxHighlighter 3.0.83

<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/shThemeDefault.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/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/shBrushRuby.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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> 

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.config.clipboardSwf='http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

使うときはこんな感じに
<pre class="brush: xxx">
 ソースコードはここに
…
</pre>


<pre>タグの中の<と>タグはそれぞれ、&lt; と &gt; でエスケープします。

xxxの部分にいれるのは、こちらを参照してください。

なお、Bloggerに追加するときは、「HTMLの編集」を選択します。「作成」のほうだとうまく適用されません。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。