SecondGround: Blogger に Syntax Highlighter を導入

ブログ上のソースコードのハイライトテンプレートをSyntax Highlighterに変更しました。

導入方法は、Bloggerの設定画面に入り「デザイン」→「HTMLの編集」から
以下のコードを<head></head>タグ内に追加します。

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<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 type='text/javascript'>
  window.onload = function() {
  SyntaxHighlighter.autoloader(
    'applescript            http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js',
    'actionscript3 as3      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js',
    'bash shell             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js',
    'coldfusion cf          http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js',
    'cpp c                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js',
    'c# c-sharp csharp      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js',
    'css                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js',
    'delphi pascal          http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js',
    'diff patch pas         http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js',
    'erl erlang             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js',
    'groovy                 http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js',
    'java                   http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js',
    'jfx javafx             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js',
    'js jscript javascript  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
    'perl pl                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js',
    'php                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
    'text plain             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js',
    'py python              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js',
    'ruby rails ror rb      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js',
    'sass scss              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSass.js',
    'scala                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js',
    'sql                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
    'vb vbnet               http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js',
    'xml xhtml xslt html    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'
  );
  SyntaxHighlighter.all();
};
</script>

上記コードを追加したら、ブログ上でハイライトを適用したいコードを
以下の<pre>タグ内にHTMLエンコードした状態で記述します

<pre class="brush: ####">

</pre>

「####」の部分には適用したい言語の種類を記述します。
適用できる言語の種類は以下をご参考ください。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

また上記のハイライトはデフォルトですが、<head>タグに記述した4行目の
「shThemeDefault.css」を変更すれば何種類かのスタイルから選択することができます。
スタイルの種類は以下をご参考ください。
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

SecondGround

2011年6月14日火曜日

Blogger に Syntax Highlighter を導入

0 件のコメント:

コメントを投稿