2011年5月14日土曜日

Blogger でコードをシンタックスハイライトする

Blogger に限らずコードを記載するとき、ただ載せるだけではわかりにくい感じがします。
様々なエディタにある機能の、プログラミング言語コードを色づけてくれるシンタックスハイライトのように表示できれば、わかりやすくなると思います。
今まで当ブログでは、 GitHub を使ったりしていましたが、より簡単な方法があったので前回の記事から使い始めました。その名も Syntax Highlighter です。

実際の設定作業は、Blogger テンプレートの の前にコードを挿入するだけなんですが、シンタックスハイライトを使う言語毎のスクリプトファイルを読み込むので、必要なものだけ読み込むように設定した方が良いのと、色づけのテーマが何種類かあるので気に入ったものを設定するようしたいものです。
簡単に好みの挿入用コードを作成するツールが web で公開されているのでそちらを使うと楽です。

1.コードを取得する
Way2Blogging > How To Add Syntax Highlighter(V3) To Blogger Blogs のページ下部にある Syntax Highlighter Scripts Generator for Blogger がそのツールになります。

1-1.テーマ選択
"Select a Theme" では使用したい色づけテーマを選びます。
各テーマのサンプルは SyntaxHighlighter > Themesにあります。 CSS Themes の Name にあるリンクをクリックするとサンプルが表示されます。

1-2.言語選択
"Select Brushes" でハイライトさせるプログラミング言語を指定します。使う予定がないものは選択しないのが吉です。

1-3.コード生成
選択が終われば、 Get Code ボタンをクリックします。下に挿入用コードが生成されるので、そちらがコードになります。

2.コードを埋め込む
生成されたコードをコピーして、ブログテンプレートの </head> の前に挿入してください。テンプレートを保存すれば準備完了。

3.使用方法
使い方ですが、 Blogger で記事投稿時に "HTML の編集" でシンタックスハイライトしたいコードを挿入します。そのコードの前後に、下記のように記述をすればOK。
 
 色づけしたいコードを記述
タイトルは必要なければ、title="タイトル" の箇所を削除してください。
また、プログラミング言語名は python とか java とか記述します。
簡単ですね。

0 件のコメント :

コメントを投稿