ソースコードの表示には SyntaxHighlighter: blogger

時々ソースコードまがいをのせることがあるので、あちこちで見かけるような綺麗な表示方法を探ってみた。

1.次のコードを、テンプレートに追加する。 Blogger テンプレート → HTMLの編集
</head>の直前に追加する。

<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'/>
<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'/>

次のコードを、</body>の直前に追加する。

<script type='text/javascript'>
SyntaxHighlighter.all()
</script>

ソースコードをこれで表示するためには、次のように挟む。

<pre class="brush: js">ソースコードの内容</pre>

又は、次のように挟むと、<>等の文字をエスケープさせる必要が無い。

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
ソースコードの内容
]]></script>

Blogger の公式投稿画面では、ソースコードを他からコピーして、ペーストすると、自動的に<pre> タグで囲まれることもあるので、HTMLソースの編集で、<pre> を<pre class="brush: js">等に変更すればよい。

多様なデザインがあるので、白調、黒長等好みで選べる。

 href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css

のshThemeDefault.cssの部分をshThemeEmacs.css、shThemeRDark.cssなどに変更すればよい。

       /***********************************
        ** Multiline block comments
        **********************************/
      
       $stringWithUrl = "http://alexgorbatchev.com";
       $string   = 'hello world!';
       
       ob_start("parseOutputBuffer");  // Start Code Buffering
       session_start();
       
       function parseOutputBuffer($buf) {
        global $portal_small_code, $portal_gzcompress;
        global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
      
        // cleaning out the code.
        if($portal_small_code && !$portal_gzcompress) {
         $buf = str_replace(" ", "", $buf);
         $buf = str_replace("n", "", $buf);
         $buf = str_replace(chr(13), "", $buf);
        }
       }

ちなみにダブルクリックすると、ソース全体を選択できる。コピーする時には。