Google

このブログについて

プロフィールGoogle Blogger の使い方、カスタマイズ方法、各種ツールなど、Blogger 関連の役立つ情報を紹介しています。

フィードリーダーに登録

お知らせ

また発作的にブログを作ってしまいました。


フォトログも更新中。フィードリーダーの片隅にでも、置いてもらえるとうれしいです。

以前の記事

現在の閲覧者数

web tracker
2008-06-21

コードをハイライトする「Blogger Syntax Highlighter」ウィジェット このエントリーをはてなブックマークに追加

先日、Google のコードハイライトツールを利用した「Code Prettify」ウィジェットを紹介したばかりなんですが、今回は、ブログ内のコードをハイライト表示するもう一つのウィジェット、「Blogger Syntax Highlighter」の紹介です。

参考にさせてもらったのは、こちら。

このウィジェットは、Google Code に公開されている「syntaxhighlighter」というコードを元に作られています。このウィジェットを導入しておくと、ブログ本文に

<pre name="code" class="java">
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
</pre>

などと記入したときに、



と表示してくれます。行番号が表示されるのがいいですね。この行番号は、コードをコピーするときにも選択されないというスグレモノ。プレインテキストをポップアップウィンドウで表示する「view plain」、コードだけを直接プリントアウトできる「print」なんかのメニューがついているのも、いい感じです。上記は Firefox によるスクリーンショットなんですが、Internet Explorer で閲覧すると、ワンクリックでコードをクリップボードへコピーできる「copy to clipboard」という項目も表示されます。

実際にどのように表示されるのかは、FaziBear でご確認下さい。

ちなみに、同じコードを「Code Prettify」で表示するとこんな感じ。



「Blogger Syntax Highlighter」を見た後だと、少しシンプルすぎる気がしますね。


導入

このコードハイライト機能の導入は、

の「Add to Blogger」ボタンを押し、ハイライト機能を導入したいブログを選択、「タイトル」入力欄を空白にして、「ウィジットを追加」ボタンを押すだけ。


使い方

<pre name="code" class="java">
(コード)
</pre>

のように、表示させたいコードを pre 要素に入れて投稿します。HTML ソースを公開するときなどに、<> を表示させたい場合には、それぞれ &lt;&gt; に書き換えてください。
赤字の部分では、コードの種類(言語)を指定します。ハイライト表示の可能な言語は、

  • c
  • c++
  • c#
  • css
  • delphi
  • html
  • java
  • js
  • pascal
  • php
  • python
  • ruby
  • sql
  • vb
  • xml
などです。指定できる言語の種類についての詳細は、こちらからご確認下さい。この、コードの種類を指定するという作業が「Code Prettify」に比べて少し面倒かも。


高度な使い方

言語の指定の後に、オプションをつけて、表示をカスタマイズすることもできます。

nogutter行番号を非表示に
nocontrolsメニューを非表示
collapse「+ expand source」を押すとコードが表示される折りたたみ機能の追加
firstline[50]最初の行番号を指定(指定しなければ 1)
showcolumnsコードの上に水平ルーラ(文字数表示)を表示

たとえば、C++ のコードをメニューをつけずに表示させたい場合は、

class="c++:nocontrols"

と指定します。このように、オプションは : を使って追加して下さい。詳しくは、こちらをどうぞ。


変換ツール

投稿する際に、コードを pre 要素で囲むのが面倒だという人や、<> の書き換えが面倒だという人は、下の変換ツールをどうぞ。

変換したいコードを上のテキストエリアに入力し、「変換」ボタンを押すと、下のテキストエリアに変換された文字列が表示されます。

オプション:      
から行番号を開始

言語: 

注意: JavaScript をオンにしてご利用下さい。

…ということで、ブログにコードをよく掲載される方は、試しに導入されてみてはいかがでしょうか。
posted at 12:35 | Translate このエントリーをはてなブックマークに追加 このエントリーを含むはてなブックマークを表示
:
  • 国内外問わず、
    同じようなレイアウトのソースpre表示はみなさん何を使われているのかずっとわからなかったのですが、
    ようやくわかりました!!
    早速ブログで使わせてもらいました。

    ありがとうございます。

    By Blogger ゲンゾウ, at 19 September, 2008 08:10  

  • ウィジェットを追加だとうまく動かなかったです。
    ↓だとできました。
    http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html

    By Blogger taka, at 26 October, 2008 23:26  

  • Firefox だと「ウィジェットを追加」がうまく機能しないときがありますね。ご報告ありがとうございます。

    By Blogger Kuribo, at 04 April, 2009 14:43  

  • 大変参考になりました。ありがとうございます。

    By Blogger 素敵なお父さん憧れ, at 30 August, 2009 23:48  

  • ものすごく助かりました。感謝します。

    By Blogger taranome, at 16 October, 2009 15:36  

  • Syntax Highlighterの導入方法が、分かりやすく、大変参考になりました。有難うございます。

    By Blogger Nobo, at 24 October, 2009 13:49  

  • > 素敵なお父さん憧れさん、taranome さん、Nobo さん

    どういたしましてです。
    コメントありがとうございます。

    By Blogger Kuribo, at 24 October, 2009 15:13  

  • すごくカンタンに導入できました。
    ありがとうございました!

    By Blogger iNee, at 26 October, 2009 22:05  

  • 大変たすかりました。自前サーバーでないのでJSファイルをどうしようかと考え中でした。
    結構みやすいですよね。

    By Blogger Ryu///Superfly, at 18 February, 2010 16:23  

Post a Comment


Links to this post:

Create a Link