ソースコードを綺麗に表示出来るSyntaxHighlighterをBloggerに導入

ブログでソースコードを記載する際、なるべく見易く綺麗に表示したいですね。

そういったツールは下のサイトで紹介されてる様に色々あります。

あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.net

そんな中から、今回は「Syntax Highlighter Scripts Generator」を利用してみようと思います。

「Syntax Highlighter Scripts Generator」はBloggerに利用出来るようにウィジェットを生成してくれます。

１．テーマと言語を指定
まずは利用するカラーパターンのテーマと言語を指定します。

”Select a Theme for Syntax Highlighter”でカラーテーマを選び、”Select Brushes”で利用する言語にチェックを付けます。

カラー・テーマは”SyntaxHighlighter – Themes”でイメージを確認する事が出来ます。
”Select Brushes”は最低１つは必要です。

選択したら”GENERATE”ボタンをクリックします。

２．生成されたコードをコピーする。
GENERATEボタンをクリックするとコードが生成されます。

”COPY TO CLIPBOARD”をクリックします。

３．コードをBloggerに挿入する。
「テンプレート」→「HTMLの編集」をクリックし、ソースを表示します。
コピーしたコードを<head>から </head>の間に挿入します。

 <meta content='text/html; charset=UTF-8' http-equiv='content-type'/>
 <meta content='text/css' http-equiv='content-style-type'/>
 <meta content='text/javascript' http-equiv='content-script-type'/>
 <meta content='ja' http-equiv='content-language'/>
<!-- Syntax Highlighter -->
 <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/shBrushJScript.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/shBrushPlain.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
 <script language='javascript' type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
 </script>
<!-- Syntax Highlighter -->

うちのテンプレートでは<!– Syntax Highlighter –>で囲った680行目から693行に挿入しています。
後は”テンプレートの保存”で終わりです。

４．右上の？を消す
このまま利用しても問題ありませんが、利用するとテキストボックスの右上に”？”が表示され、クリックするとSyntaxHighlighterのバージョン表示画面されます。

それを避ける為に
SyntaxHighlighter.defaults[‘toolbar’] = false;
という項目を１つ追加します。

 <script language='javascript' type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.defaults[’toolbar’] = false;
  SyntaxHighlighter.all();
 </script>
<!-- Syntax Highlighter -->

うちのテンプレートでは690行目の下に追加しました。

【コードの利用法】
SyntaxHighlighterでコードを記述する際は、

と記述します。

aliasには１で指定した言語のいずれかを指定します。

SyntaxHighlighter – Bundled Brushes

他にも色んな設定が出来ます。
詳しくは↓のサイトをご覧ください。

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve

共有: