Androidアプリ開発の紆余曲折

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) {
        ;
    }
}

この時の記述は以下のとおり。
class="brush: xxxxx"を強調表示したい言語に置き換えて使用する。

<pre class="brush: java">

当たり前の話だが、ここで指定する言語指定は最初の定義生成時に選択してbloggerのテンプレートヘッダーに定義されている必要がある。

ここで表示しているプレーンテキストの場合は以下の通り定義することで強調表示のない表示ができる。

<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日金曜日

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

Syntax Highlighterとは

導入方法

使い方

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

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