アメブロに SyntaxHighlighter を設置する | ベンチャー企業 CIO: 池谷 義則ブログ&経営、ビジネス、プログラミング技術や便利なオープンソースの紹介

ベンチャー企業 CIO: 池谷 義則ブログ&経営、ビジネス、プログラミング技術や便利なオープンソースの紹介

SKYAVY, INC. CIOの池谷義則のブログ & ベンチャー企業 & 経営、ビジネス、プログラミング技術や便利なオープンソースの紹介

今後、コード等を張ることも増えそうなので、先に貼り付けるコードが読みやすいようにSyntaxHighlighterを設置します。

まず、「設定・管理」のフリープラグインに以下のコードを登録。
以下でコメントアウトされている部分は、僕の場合actionscriptやc#のコードは張らなそうなので、無駄なJSファイルを読ませてロードが遅くなるのを防ぐためにしています。
必要に応じてコメントアウトを変えてください。

あとは、エディターの「HTML表示」で、
<pre class="brush: xxxxxx">
</pre>
と書いて、「通常モード」に戻してコードを書けばOK。
「xxxxxx」に、貼り付けるコードの言語を指定。指定可能なものは、下のコードを確認してください。たとえば、bach、cssなど。

どうやら、「HTML」モードで <script> を貼り付けると、保存時に文句を言われるので、「通常モード」でサニタイズさせる必要があるようですね。
もちろん、禁止コード以外は、「HTMLモード」でもOKっぽw

<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>
$(document).ready(function() {
  $("head").append('<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" type="text/css" />');
  $("head").append('<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" type="text/css" />');
 
  function path() {
    var args = arguments,
    result = [];
 
    for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
 
    return result
  }
 
  SyntaxHighlighter.autoloader.apply(null, path(
    'bash shell             @shBrushBash.js',
    'css                    @shBrushCss.js',
    'js jscript javascript  @shBrushJScript.js',
    'php                    @shBrushPhp.js',
    'text plain             @shBrushPlain.js',
    'sass scss              @shBrushSass.js',
    'sql                    @shBrushSql.js',
    'xml xhtml xslt html    @shBrushXml.js'
/*
    'applescript            @shBrushAppleScript.js',
    'actionscript3 as3      @shBrushAS3.js',
    'coldfusion cf          @shBrushColdFusion.js',
    'cpp c                  @shBrushCpp.js',
    'c# c-sharp csharp      @shBrushCSharp.js',
    'delphi pascal          @shBrushDelphi.js',
    'diff patch pas         @shBrushDiff.js',
    'erl erlang             @shBrushErlang.js',
    'groovy                 @shBrushGroovy.js',
    'java                   @shBrushJava.js',
    'jfx javafx             @shBrushJavaFX.js',
    'perl pl                @shBrushPerl.js',
    'py python              @shBrushPython.js',
    'ruby rails ror rb      @shBrushRuby.js',
    'scala                  @shBrushScala.js',
*/
  ));
  SyntaxHighlighter.config.stripBrs=true;
  SyntaxHighlighter.all();
 
});
</script>

あと、「表示の確認をする」ではプラグインが作動しないようなので、あくまでも「公開」後に確認できる模様。

どっちにしても、ソースコードをこんな形でしか貼り付けることが出来ないなんて、アメブロ使いづらいな・・・
そこそこ需要ありそうなのにw

参考: http://ameblo.jp/new-blue-777/entry-11597340425.html