bloggerへのSyntaxHighLighter（ver2.0.320）の導入

bloggerへのSyntaxHighLighterの導入方法は調べれば出てくるのですが、ver3.x系の導入方法が多いですね。

ver3.x系はソースコードの改行表示に対応してなかったので、自分はver2.x系（ver2.0.320）を導入しました。

以下、導入の際のメモです。

（１）How to Add Syntax Highlighter(v3) to Blogger Blogsにアクセス
（２）サイト内の「GENERATE　SCRIPTS」をクリック
（３）「Select a Theme」でbloggerへ表示するSyntaxHighLigherのテーマを、「Select Brushes」でSyntaxHightLigherを適用させたいコードを選択。
（自分はテーマは「default」コードはSQL、CSS、JavaScript、Xml、Javaを選択しました）
（４）選択したら「Generate」をクリック
（５）下記コードが表示されるのでコピー

<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>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

（６）上記はver3.0.83（2012.11.15時点）なのでメモ帳などに貼り付けて、コードのhttp://alexgorbatchev.com/pub/sh/current/currentの部分をhttp://alexgorbatchev.com/pub/sh/current/2.0.320へ修正

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

（７）bloggerの「テンプレート⇒HTMLの編集⇒続行」から、上記コードを</head>の直前へ貼り付ける。

これでbloggerでのSyntaxHighLighterの導入は完了です。

bloggerへのソースの投稿方法は調べると出てくるので割愛。。

ただし、上記のままだと長いソースを投稿した際にソースがはみ出る場合があります。

はみ出さないようにする設定方法はこちらの記事で記載します。


【参考サイト】
・導入方法
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve
暇つぶし: Syntax Highlighter
・verによる違い
SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript - 道すがら講堂
・ver2.0.320について SyntaxHighlighter 2.0.320 の使い方 - NAVER まとめ