2013年5月25日土曜日

ソースコードを見やすく表示する SyntaxHighlighter を Blogger で使う

導入方法
Bloggerの テンプレート>HTMLの編集 で</body>の直前に下記のコードを貼り付けます。
<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/shAutoloader.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/shBrushXml.js' type='text/javascript'></script>
<script type='text/javascript'>
function path()
{
  var args = arguments,
      result = [];
 
  for(var i = 0; i &lt; args.length; i++)
     result.push(args[i].replace('@','http://alexgorbatchev.com/pub/sh/current/scripts/'));
 
  return result
};
 
SyntaxHighlighter.autoloader.apply(null, path(
    'applescript            @shBrushAppleScript.js',
    'actionscript3 as3      @shBrushAS3.js',
    'bash shell             @shBrushBash.js',
    'coldfusion cf          @shBrushColdFusion.js',
    'cpp c                  @shBrushCpp.js',
    'c# c-sharp csharp      @shBrushCSharp.js',
    'css                    @shBrushCss.js',
    'delphi pascal          @shBrushDelphi.js',
    'diff patch pas         @shBrushDiff.js',
    'erl erlang             @shBrushErlang.js',
    'groovy                 @shBrushGroovy.js',
    'java                   @shBrushJava.js',
    'jfx javafx             @shBrushJavaFX.js',
    'js jscript javascript  @shBrushJScript.js',
    'perl pl                @shBrushPerl.js',
    'php                    @shBrushPhp.js',
    'text plain             @shBrushPlain.js',
    'py python              @shBrushPython.js',
    'powershell ps posh     @shBrushPowerShell.js',
    'ruby rails ror rb      @shBrushRuby.js',
    'sass scss              @shBrushSass.js',
    'scala                  @shBrushScala.js',
    'sql                    @shBrushSql.js',
    'vb vbnet               @shBrushVb.js',
    'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.all()
</script>

使い方
ツールにソースコードを貼り付けて変換。<pre>タグの brush: html を対象の言語に変更します。

WEB表示用、HTMLエンコード置換変換
http://www.netyasun.com/syntaxhighlighter/source-escape.htm


あとは、投稿するときにHTMLとして貼り付けるだけです。
プレビューには適応されません。

0 件のコメント:

コメントを投稿