BloggerへのAndroidソースコード貼付け方法

BloggerでAndroidのソースコード（主にJava、xml）を奇麗に貼付ける方法です。

SyntaxHighlighterというフリーで公開されているJavaScriptを使うことで、下記のように奇麗に表示できます。

public class ApiDemos extends ListActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        Intent intent = getIntent();
        String path = intent.getStringExtra("com.example.android.apis.Path");
        
        if (path == null) {
            path = "";
        }

        setListAdapter(new SimpleAdapter(this, getData(path),
                android.R.layout.simple_list_item_1, new String[] { "title" },
                new int[] { android.R.id.text1 }));
        getListView().setTextFilterEnabled(true);
    }

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/accessibility_service_instructions"
        />

    <ImageButton android:id="@+id/button"
        android:background="@drawable/ic_launcher_settings"
        android:layout_width="32dip"
        android:layout_height="32dip"
        android:layout_marginTop="50dip"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true" />
</LinearLayout>

まず最初にBloggerへ設定が必要です。
BloggerのTemplateからEdit HTMLを選択し、確認画面がでるので、Proceedを選択します。

編集画面がでたら</head>を探します。その</head>の直前に下記のコードを挿入します。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

保存して編集を終了します。以上で設定は完了です。

あとは下記の手順で自分の投稿（post）にソースコードを貼付けることができます。
ソースコードを貼付けたい時は、ComposeでなくHTMLに入力モードを切り替えて、

<pre class="brush:java;">
貼付けたいAndroidソースコード（Java）
</pre>

または、

<pre class="brush:xml;">

貼付けたいxml（layout.xmlなど）

</pre>

とpreの間にソースコードを貼付けた記述を挿入します。

ただし！貼付けるソースコードは<>などのHTML的特殊記号がエスケープされている（&lt;のように）必要があります。なので、コードをそのままコピペすることはできません！
そこで、コピペしたコードをHTMLエスケープされたコードに変換してからコピペする必要があります。下記のサイトで簡単に一発変換できます。

WEBサイト・ブログの為のHTMLソースコード変換

これで奇麗なソースコードが表示されます。他にもいろいろ変換してくれるサイトがありますので、気に入ったところを探してみてください。

その他の修飾機能として、タイトルや開始行、特定の行の強調表示なども行えます。
タイトルの指定は、
<pre class="brush:xml;" title="タイトル">
とします。
開始行はfirst-line、行の強調はhighlightを使います。複数行の指定も可能で、カンマ（,）で複数記述できます。
<pre class="brush:xml; first-line:10; highlight:[10,15]">

package jp.myapp.sample;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

public class SubAppActivity extends Activity {
 private final static String TAB = "SubAppActivity";
    @Override
    public void onCreate(Bundle savedInstanceState) {
     Log.i(TAB, "onCreate");
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sub);
    }

おまけ：BloggerへのSyntax Highlighterの設定ですが、下記のサイトで自動生成することができます。Syntax Highlighterは多数の言語に対応していますので、他の言語も使いたい時はこちらのサイトを利用すると簡単です。

Way2Blogging：HOW TO ADD SYNTAX HIGHLIGHTER(V3) TO BLOGGER BLOGS

Syntax Highlighterそのものの使い方は下記の公式サイトを参照。

Syntax Highlighter公式サイト