bloggerへのSyntaxHighlighter導入と表示パラメータ調査メモ

Syntax Highlighterとは

調べものでＷｅｂを徘徊している時によく見る、
Blog記事上に綺麗にソースコードを表示する機能を持つJavaScript。

このBlogにもソースコードを載せていきたいので導入した時の調査メモ。

導入方法

Syntax Highlighterを導入する
Syntax Highlighter Scripts Generatorサイト
(http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator)
にて表示させたいテーマと強調表示させたい言語を選択し「Generate」ボタンをクリック。
bloggerのテンプレートへ生成されたリンク・スクリプトをコピペする
ページ下部に生成された定義が表示されるので、クリップボードへコピーしてBloggerのテンプレートのヘッダーへペースト。
表示テーマのカスタムをしない場合はこれだけで準備完了！

使い方

<pre></pre>で囲った部分がソースコード表示される。
<pre>タグのパラメータを指定することで表示方法を制御できる。
HTML編集で以下の様に記述する...

<pre class="brush: (強調させたい言語); (パラメータ)...>
    表示するソースコード
</pre>

ソースコードの表示例（Java）

public class Hoge{
    public static void main (String[] args) {
        ;
    }
}

<pre class="brush: java">

<pre class="brush: plain">

表示を制御するパラメータ

auto-links (true/false *default=true)
投稿コード内の全てのURLをクリック可能なリンクにする。

/*
 * auto-links: true でURL表示
 * http://devwalker.blogspot.jp
 */
public class Hoge{
    String url = "http://devwalker.blogspot.jp";
}

class-name
highlighterエレメントにカスタムクラス（スタイル）を指定することができる。
```
public class Hoge{
    ;
}
```

collapse (true/false *default=false)
trueの場合、コードボックスが折り畳まれる。

/*
 * collapse=trueの場合の表示
 */
public class TestClazz {
    private final static String HOGE = "hoge";
    public static void main(String[] args) {
        // code
    }
}

titleパラメータと併用すると便利。

/*
 * collapse=trueの場合の表示
 */
public class TestClazz {
    private final static String HOGE = "hoge";
    public static void main(String[] args) {
        // code
    }
}

first-line (数字 *default=1)
コードの左側に表示される行番号の開始番号を指定する。

/*
 * 開始行番号を20に指定（first-line: 20）
 */
public class TestClazz {
    public static void main(String[] args) {
        // code
    }
}

gutter (true/false *default=true)
行番号の表示／非表示設定。
falseの場合、コードの左側に表示される行番号が非表示になる。
```
public class TestClazz {
    public static void main(String[] args) {
        // code
    }
}
```

highlight (数字。複数指定時の場合は[x,x,...]で指定)
強調表示したいコードの行番号を指定することができる。
first-lineパラメータで開始行番号を変更した場合は、その変更後の行番号を指定する必要がある。

/*
 * highlight ="[5, 7]"を指定して強調表示
 */
public class TestClazz {
    private final static String HOGE = "hoge";
    public static void main(String[] args) {
        // code
    }
}

/*
 * first-line: 21 を指定した場合、highlightオプションも
 * firstlineオプションに指定した開始行番号に基づき指定を変更する。
 * ※highlight: [27, 29]
 */
public class TestClazz {
    private final static String HOGE = "hoge";
    public static void main(String[] args) {
        // code
    }
}

html-script (true/false *default=false)
trueの場合、コード内の任意のHTML/XMLが強調表示される。
HTMLにPHPなどを混合している場合の表示に便利。特定の言語で動作します。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>title</title>
</head>
<body>
    <script language="JavaScript">
    document.write("...");
    </script>
</body>
</html>

smart-tabs (true/false *default=true)
スマートタブ機能の有効／無効を指定できる。けどイマイチ違いが良くわかりません。
タブによる表示のズレを抑えてtab-sizeと同じ半角文字数幅に抑える機能でしょうか？

smart-tabs:true
```
public class Sample {
12    hello  ya!
}
```
smart-tabs:false
```
public class Sample {
12    hello  ya!
}
```

tab-size (数字 *default=4)
コードボックスのタブサイズを指定できる。

public class Sample {
 // tab-size:12 を指定するとタブが半角12文字分の扱いとなる
}

toolbar (true/false *default=true)
コードボックスのツールバーの表示／非表示を指定できる。（右上に表示される？ボタン）
```
public class Sample {
    //
}
```
title (文字列)
コードボックスにタイトルを指定できます。
```
// title: 'サンプルタイトル'
public class Sample {
    //
}
```
light (true/false *Default="false")
trueの場合、行番号とツールバーが非表示になる。１・２行のコードを表示する時に便利。
```
// １・２行だけなら便利かも
public final static String API_KEY_VALUE = "hogehoge";
```

pad-line-numbers (true/false/数字 *Default="false")
行番号の番号0埋めを指定できるパラメータ。
true=自動--表示行数に応じて行番号の0埋めをしてくれる。
false=無効--行番号の0埋めをしない。
数字=0埋めする桁数を指定。

// pad-line-numbers: true
public class TestClazz {
    private final static String HOGE = "hoge";
    public static void main(String[] args) {
    /*
     * 表示行数が2桁なので
     * 0埋めされて行番号が表示される。
     */
    }
}

// pad-line-numbers: false (Default)
public class TestClazz {
    private final static String HOGE = "hoge";
    public static void main(String[] args) {
    /*
     * 行番号が2桁だが、
     * 行番号の0埋め表示はされない。
     */
    }
}

// pad-line-numbers: 4
public class TestClazz {
    private final static String HOGE = "hoge";
    public static void main(String[] args) {
        /*
         * 指定した桁数で
         * 行番号が0埋め表示される。
         */
    }
}

quick-code (true/false *Default="true")
クイックコードコピー機能の有効／無効を設定します。
あまりよくわかりません。。。
```
// quick-code: false
public class TestClazz {
    private final static String HOGE = "hoge";
}
```

SyntaxHighlighterのコードより調査...

Androidアプリ開発の紆余曲折

2013年5月24日金曜日