参考にさせてもらったのは、こちら。
このウィジェットは、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>
のように、表示させたいコードを pre 要素に入れて投稿します。HTML ソースを公開するときなどに、
< や > を表示させたい場合には、それぞれ < と > に書き換えてください。赤字の部分では、コードの種類(言語)を指定します。ハイライト表示の可能な言語は、
- c
- c++
- c#
- css
- delphi
- html
- java
- js
- pascal
- php
- python
- ruby
- sql
- vb
- xml
高度な使い方
言語の指定の後に、オプションをつけて、表示をカスタマイズすることもできます。
| nogutter | 行番号を非表示に |
| nocontrols | メニューを非表示 |
| collapse | 「+ expand source」を押すとコードが表示される折りたたみ機能の追加 |
| firstline[50] | 最初の行番号を指定(指定しなければ 1) |
| showcolumns | コードの上に水平ルーラ(文字数表示)を表示 |
たとえば、C++ のコードをメニューをつけずに表示させたい場合は、
class="c++:nocontrols"
と指定します。このように、オプションは
: を使って追加して下さい。詳しくは、こちらをどうぞ。
変換ツール
投稿する際に、コードを pre 要素で囲むのが面倒だという人や、
< や > の書き換えが面倒だという人は、下の変換ツールをどうぞ。変換したいコードを上のテキストエリアに入力し、「変換」ボタンを押すと、下のテキストエリアに変換された文字列が表示されます。
注意: JavaScript をオンにしてご利用下さい。
…ということで、ブログにコードをよく掲載される方は、試しに導入されてみてはいかがでしょうか。
10 comments:
国内外問わず、
同じようなレイアウトのソースpre表示はみなさん何を使われているのかずっとわからなかったのですが、
ようやくわかりました!!
早速ブログで使わせてもらいました。
ありがとうございます。
ウィジェットを追加だとうまく動かなかったです。
↓だとできました。
http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html
Firefox だと「ウィジェットを追加」がうまく機能しないときがありますね。ご報告ありがとうございます。
大変参考になりました。ありがとうございます。
ものすごく助かりました。感謝します。
Syntax Highlighterの導入方法が、分かりやすく、大変参考になりました。有難うございます。
> 素敵なお父さん憧れさん、taranome さん、Nobo さん
どういたしましてです。
コメントありがとうございます。
すごくカンタンに導入できました。
ありがとうございました!
大変たすかりました。自前サーバーでないのでJSファイルをどうしようかと考え中でした。
結構みやすいですよね。
導入させていただきました。
その途中おもしろいことに気づいたので報告します。
最初この方法を知らずHTMLを編集する方法でやった所適用されませんでした。
そしてこの方法を知ってHTMLの方はほったらかしでやったところ適用されたのですが二三回表示したあとに一回しか書いていないコードがなぜか二個表示されるという変なバグが起こりました。
まさかと思いHTMLの方をもとに戻した(導入前の状態)にしたところバグは治りました。
両方参考にしようとおもっていたらそこら辺の注意が必要かもしれません。
Post a Comment