ブログへのプログラムコード表示

ブログの作成ページでも基本的なページは作れるけれど、プログラムコードの表示エリアを罫線で囲みたいとか、ここの文章の文字の色は変えたいとかは「作成」タグではできないみたい。他の人のページを見ると罫線で囲ったり、色変えたり、画像を並べたり綺麗に配置されてる。blog を書く人にとっては、HTML や CSS はごく当たり前に使うものなのですね。ここは私も「HTML」編集画面デビューしよう。まずは、プログラムコードの囲み枠から！

1. プログラムコード用の罫線囲み 一番に使いたいのがプログラムコード表示エリアを罫線で囲むこと。pre タグの CSS 定義が Blogger で有効かたしかめてみる。
   こんなコードを書いてみると。。。

   <style type="text/css">
   pre  {
   　border: solid 0.1px white;
   　padding: 5px 0 5px 10px;
   }
   </style>
   <pre>
   $ ls -l
   </pre>
   

   こんな結果なりました。

   $ ls -l
   

   常に失敗はつきもので、html タグを pre の中に記述する時に"<",">" は "&lt","&gt" に置き換えないとうまく表示されないのですね。というわけで本当はこのように記載しています。

   &ltstyle type="text/css"&gt
   pre  {
   　border: solid 0.1px white;
   　padding: 5px 0 5px 10px;
   }
   &ltstyle&gt
   &ltpre&gt
   $ ls -l
   &ltpre&gt
   

　
2. Open Source Java script(SyntaxHighlighter)
   プログラムコードの囲み表示について検索していたら、便利そうな javascript に出会った。これを導入しておけば、先ほどコードも以下のように綺麗に整形されてラクラクです。
   

   <style type="text/css">
   pre  {
   　border: solid 0.1px white;
   　padding: 5px 0 5px 10px;
   }
   </style>
   <pre>
   $ ls -l
   </pre>
   

   
   導入方法は沢山の人が紹介しているけれど一応記載しておこう(ここ)
   
   • 　テンプレートの「HTMLの編集」を選択
     
     
     
     
   • 　テンプレート編集＞HTMLの編集を続行
     
     
     
     
   • 　</header> 前にコードペーストし保存
     
     
     
     
   • 実際に貼り付けるのは必要なコードのモジュールだけ
     

     <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/shThemeMidnight.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/shBrushCss.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/shBrushPhp.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
     
     
     <!-- 
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushJScript.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
     <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
     -->
     
     <script language='javascript'>
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
     SyntaxHighlighter.all();
     </script>