2010年10月10日日曜日

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

ラベル:

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

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

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

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


    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>
      結果
      1
      2
      3
      4
      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属性に記述する。

      結果
      これはテストです
      1
      2
      3
      4
      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 を指定する。

      結果

    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>
      結果
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <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>
      結果
      10
      11
      12
      13
      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が設定されている。サイズを変更したい場合、このオプションで変更。

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