2010年10月10日日曜日

ブログ上でプログラムソースを表示する方法②

ソースコードをHTMLに変換するサービスを始めました。
「インラインCSS」をチェックするとコード量が多くなりますが、特別な設定なしでブログ等に表示することが可能になります。宜しかったら、ご利用ください。
 →   syntax2html  (クリックします・・・最初の画面表示までに時間が掛かる場合があります)

前回記事 でSyntaxHighlighterの設定を行なった。今回は設置したSyntaxHighlighterの使用方法について記事を書く。以下、使用方法・注意点など箇条書きで記述する。

  1. 使用方法
    SyntaxHighlighterを使用してソースを表示するには、preタグを利用する。
    <pre class="brush: alias">
       (ソースはここ)
    </pre>
    
          alias にソースの種別コードを指定する。
    記述例(python)
    <pre class="brush: py">
      print "Hello world"
    </pre>
    
    結果
      print "Hello world"
    

    次のように、scriptタグを使う方法もあるそうだ(10/25追加)。
    <script class="brush: alias" type="syntaxhighlighter"><![CDATA[
       (ソースはここ)
    ]]></script>
    
          alias にソースの種別コードを指定する。
    この指定方法では後述する特殊文字の問題は発生しないため、ソースをそのまま表示可能だ。
    参考: Linux愛好者の独り言  SyntaxHighlighter 3.0を使いこなす2


    aliasに指定できるコードは以下の表を参照。
    参考: Aliasに設定するコード一覧(本家サイトより)
    Brush name
    ソース種別
    Brush aliases
    設定できるコード
    File name
    JSファイル名
    ActionScript3as3, actionscript3shBrushAS3.js
    Bash/shellbash, shellshBrushBash.js
    ColdFusioncf, coldfusionshBrushColdFusion.js
    C#c-sharp, csharpshBrushCSharp.js
    C++cpp, cshBrushCpp.js
    CSScssshBrushCss.js
    Delphidelphi, pas, pascalshBrushDelphi.js
    Diffdiff, patchshBrushDiff.js
    Erlangerl, erlangshBrushErlang.js
    GroovygroovyshBrushGroovy.js
    JavaScriptjs, jscript, javascriptshBrushJScript.js
    JavajavashBrushJava.js
    JavaFXjfx, javafxshBrushJavaFX.js
    Perlperl, plshBrushPerl.js
    PHPphpshBrushPhp.js
    Plain Textplain, textshBrushPlain.js
    PowerShellps, powershellshBrushPowerShell.js
    Pythonpy, pythonshBrushPython.js
    Rubyrails, ror, rubyshBrushRuby.js
    ScalascalashBrushScala.js
    SQLsqlshBrushSql.js
    Visual Basicvb, vbnetshBrushVb.js
    XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js


  2. 使用上の注意点

    1. ソースコードのコピー
      ソース上でダブルクリックすることにより、ソースコード全体が選択される。その後、Ctrl+C などを利用してコード全体をコピーできる。


    2. preタグ中で使用できない文字
      幾つかの文字は preタグでは直接使用できない。使用する場合、キーワード表記もしくは10進表記に変換して使用する。
      文字<>&"'
      キーワード表記&lt;&gt;&amp;&quot; 
      10進表記&#60;&#62;&#38;&#34;&#39;

      文字列変換をサポートしてくれるサイトも存在する。変換して貼り付けるだけなので非常に楽になる。

      文字列変換サポートサイト: preタグメーカー

         ※ この情報はandonkun's noteさんのサイトを参考にしました。


    3. 記事設定
      記事をブログに投稿する時に、「改行HTMLタグ変換」→「改行を<br/>タグに変換しない」 を選択する必要がある。



  3. オプション
    preタグと一緒に使用できるオプションが幾つか存在する。以下簡単に使用例を示す。

    1. highlight - 強調表示

      記述例(1・2・4行目を強調)
      <pre class="brush: py; highlight: [1,2,4]">
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      </pre>
      
      結果
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      

    2. title - タイトル設定

      記述例
      <pre class="brush: py" title= "これはテストです">
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      </pre>
      
      titleはclass属性でなく、title属性に記述する。

      結果
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      

    3. collapse:true - ソース折り畳み・展開

      記述例
      <pre class="brush: py; collapse: true; toolbar: true">
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      </pre>
      
      ソース展開にはツールバーがtrueになっている必要がある。ツールバーのデフォルト値がfalseの場合、preタグ中で toolbar:true を指定する。

      結果
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      

    4. gutter:false - 行番号非表示

      記述例
      <pre class="brush: py; gutter: false">
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      </pre>
      
      結果
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      

    5. html-script:true - 他のソースと同時にHTMLタグをキーワード表示

      記述例(JavaScriptとHTML)
        <pre class="brush: js; html-script: true">
        <html>
        <head>
        <title>テスト</title>
        </head>
        <body>
        <script type="text/javascript">
        <!--
        document.write("Hello World");
        // -->
        </script>
        </body>
        </html>
        </pre>
      
      結果
        <html>
        <head>
        <title>テスト</title>
        </head>
        <body>
        <script type="text/javascript">
        <!--
        document.write("Hello World");
        // -->
        </script>
        </body>
        </html>
      

    6. first-line:10 - 開始行番号を指定(ex.10番から)

      記述例
      <pre class="brush: py; first-line: 10">
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      </pre>
      
      結果
        a = "Hello"
        b = " "
        c = "world"
        print(a+b+c)
      

    7. tab-size:2 - タブサイズの指定(ex.2)

      記述例
      <pre class="brush: py; tab-size: 2">
      def sum(ls):
       s=0
       for x in ls:
        s+=x
       return(s)
      </pre>
      
      タブがあると表示サイズが、通常はデフォルトで4が設定されている。サイズを変更したい場合、このオプションで変更。

      結果
      def sum(ls):
       s=0
       for x in ls:
        s+=x
       return(s)
      
      ※ Blogger ではタブ文字を入力しても空白一文字に変換するため、表示が変わらないようだ。