ページ

▼

2013-08-28

【Google Blogger】ソースコードをきれいに表示するSyntaxHighlighterの記述方法やオプション設定について

ソースコードをきれいに表示してくれる「SyntaxHighlighter」の指定の仕方についてです。preタグやscriptタグを使って記述するとか、ソースコードのハイライト表示やタイトルを設定するなどのオプションの設定について記しておきます。


Bloggerブログでソースコードを記入


「ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve」に詳しい解説が載っています。ここではわたしなりに理解した内容を書き記しておきます。
  1. ソースの記述方法
    2.  ●preタグを使って記述
    preタグを使った場合の記述例です。preタグの間の行（2行目）に表示したいコードを埋め込めば、表示したいコードが表示されます。
    <pre class="brush: alias;">
// ココにソースを記述
</pre>
    preタグを使うメリットとデメリットは上記のとおりです。表示するコード入力した文字列内の&、"、<、>を実体参照に変換する必要があります。上記のコードの表示部分を実態参照に変換したものを以下に表示するとこんな感じです。
    <pre class="brush: alias;">
&lt;pre class="brush: alias;">
// ココにソースを記述
&lt;/pre>
</pre>
    ソースの実態参照変換分（文字列内の&、"、<、>）を変換するには、秋田さんこと「akiyan」さんのブログサイト「HTML実体参照変換」を使わせていただくと簡単に実態参照変換できます。すごく便利なので、ぜひお試しください！

    ●scriptタグを使って記述
    scriptタグを使った記述例です。preタグと同様、2行目に表示したいコードを埋め込めば、表示したいコードが表示されます。
    <script class="brush: alias;" type="syntaxhighlighter"><![CDATA[
// ココにソースを記述
]]></script>
      メリット：<以降がタグとして誤認されることがない。(</script>タグだけは&lt;/script>と記述する必要あり)
      デメリット：scriptが読み込まれるまで非表示である。また、AutoPager系の自動ページ読み込みで
      読み込まれたページはハイライトスクリプトが動かず、ソースコードが非表示のままになる。また、RSSやモバイル表示でソースコードが非表示になる。
      ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve

  2. Brush nameの選択
    3.  
    <pre class="brush: alias;">
// ココにソースを記述
</pre>
    SyntaxHighlighterを使用するには使用言語を設定する必要があるので、上記ソースコード表示の1行目<pre class="brush: c-sharp;">の「alias」部分を使用する言語形式に合わせて下記該当Brush aliases名に変更します。

    Brush name Brush aliases File name
    ActionScript3 as3, actionscript3 shBrushAS3.js
    Bash/shell bash, shell shBrushBash.js
    ColdFusion coldfusion shBrushColdFusion.js
    C++ cpp, c shBrushCpp.js
    C# c-sharp, csharp shBrushCSharp.js
    CSS css shBrushCss.js
    Delphi delphi, pas, pascal shBrushDelphi.js
    Diff diff, patch shBrushDiff.js
    Erlang erlang shBrushErlang.js
    Groovy groovy shBrushGroovy.js
    Java java shBrushJava.js
    JavaFX jfx, javafx shBrushJavaFX.js
    JavaScript js, jscript, javascript shBrushJScript.js
    Perl perl, pl shBrushPerl.js
    PHP php shBrushPhp.js
    Plain Text plain, text shBrushPlain.js
    PowerShell ps, powershell shBrushPowerShell.js
    Python py, python shBrushPython.js
    Ruby rails, ror, ruby shBrushRuby.js
    Scala scala shBrushScala.js
    SQL sql shBrushSql.js
    Visual Basic vb, vbnet shBrushVb.js
    XML html, xhtml, xml, xslt shBrushXml.js
    SyntaxHighlighter - Bundled Brushes

  3. オプションの設定
    4.  下記ソースコード表示の「class」に各種指定を行なうことで行番号の最初の番号指定やタイトル設定等を行なうことができます。
    <pre class="brush: alias; first-line: 1; highlight: [,];" title="">
   // ココにソースを記述
</pre>

    • 表示行番号の開始値を指定 → first-line: 3;
      •  クラス属性に「first-line: 3;」を指定すると指定した値から行番号が振られます。左の例では行番号が3から始まるようになります。

    • 特定の行をハイライト表示 → highlight:[1];
      •  クラス属性に「highlight:[1];」を追加すると数値指定した行をハイライト表示することができます。カンマ区切りで[1,2,3]というように複数行を指定することができます。

    • ソースコードにタイトルを付ける → title=""
      •  class属性ではなく、title属性を使用してタイトルを設定することができます。

      その他にもオプションが用意されています。詳しくは、「今日のPython: ブログ上でプログラムソースを表示する方法②」をご覧ください。


News Source Site

時刻:

0 件のコメント:

コメントを投稿