クリボウの Blogger Tips

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

> | > コードをハイライトする「Blogger Syntax Highlighter」ウィジェット

コードをハイライトする「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 をオンにしてご利用下さい。

…ということで、ブログにコードをよく掲載される方は、試しに導入されてみてはいかがでしょうか。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:25

  1. 国内外問わず、
    同じようなレイアウトのソースpre表示はみなさん何を使われているのかずっとわからなかったのですが、
    ようやくわかりました!!
    早速ブログで使わせてもらいました。

    ありがとうございます。

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

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

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

    ReplyDelete
  5. ものすごく助かりました。感謝します。

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

    ReplyDelete
  7. > 素敵なお父さん憧れさん、taranome さん、Nobo さん

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

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

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

    ReplyDelete
  10. 導入させていただきました。
    その途中おもしろいことに気づいたので報告します。
    最初この方法を知らずHTMLを編集する方法でやった所適用されませんでした。
    そしてこの方法を知ってHTMLの方はほったらかしでやったところ適用されたのですが二三回表示したあとに一回しか書いていないコードがなぜか二個表示されるという変なバグが起こりました。
    まさかと思いHTMLの方をもとに戻した(導入前の状態)にしたところバグは治りました。
    両方参考にしようとおもっていたらそこら辺の注意が必要かもしれません。

    ReplyDelete
  11. いつもいつも参考にさせてもらっています。

    「ウィジェットを追加」がうまくいかなかったので、
    やり方を自分なりに変えてみたらできました!
    ブログに書いてみました

    http://rmasco.blogspot.com/2012/03/blogger.html

    お役に立てれば・・・

    ReplyDelete
  12. Pest Control of the most important factors for maintaining health and combating insect company in Riyadh شركة مكافحة حشرات بالرياض
    . working to combat all insects such as cockroaches, rats, snakes, bugs and mosquitoes.
    To keep your family Mark your home safely and free from harmful insects
    You can also call us, we are cleaning houses in Riyadh company
    شركة تنظيف منازل بالرياض and we transfers Furniture we best movers in Riyadh company شركة نقل عفش بالرياض and we have the skill crisis to clean apartments شركة تنظيف شقق بالرياض
    شركة تنظيف فلل بالرياض

    We clean tanks in Riyadh, the best materials and the epoxy, we better clean the tanks in Riyadh company شركة تنظيف خزانات بالرياض
    And we are all the work of cleaning of houses, houses, villas, apartments and government departments, schools and mosques, we are best cleaning company in Riyadh شركة تنظيف بالرياض work as well as to isolate the roofs of buildings in the best insulating material to isolate the water and the sun and air various elements to keep the house. We use the best waterproofing ways we better insulate the roofs of company Riyadh شركة عزل الاسطح بالرياض

    We electronically detects water leaks and cracking and without using the best modern methods for the detection of water Tcherbat Vtnhn better detect water leaks in Riyadh Company
    شركة كشف تسربات المياه بالرياض

    ReplyDelete
  13. We ostensible acts of ceramic tiles and parquet and using the best quality materials Vennhn best ostensible tile company in Riyadh
    شركة جلى بلاط بالرياض
    Clogging sewage streams and sewers is a serious problem threatening human health and lead to the spread of many serious diseases. If you experience Ansd for pipes or shafts can be used in the best شركة تسليك مجارى بالرياض
    for wiring sewage, septic tanks suction to get rid of non-grainy smells

    And cleaning of carpets and rugs and washing carpets and rugs the best disinfectant detergents we best carpet cleaning company in Riyadh شركة تنظيف كنب بالرياض
    شركة غسيل سجاد بالرياض

    ReplyDelete
  14. http://alagneha-alzhbih.blogspot.com.eg/2015/09/Plain-tiles-in-Riyadh.html شركة جلي بلا بالرياض جلي بلاط شركة جلي بالرياض جلي رخام افضل جلي بالرياض شركة جلي بلا بالرياض شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Combating-the-fleas-in-Riyadh.htmlشركة مكافحة البراغيث بالرياض مكافحة البراغيث مكافحة بالرياض شركة مكافحة شركة مكافحة بالرياض مكافحة بق الفراش شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Control-of-ants-in-Riyadh.htmlشركة مكافحة النمل الابيض بالرياض مكافحة النمل الابيض شركة مكافحة بالرياض مكافحة النمل الابيض بالرياض شركة مكافحة النمل شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/12/Teslic-Piyarat-in-Riyadh.htmlشركة تسليك بيارات بالرياض تسليك تنظيف بيارات بالرياض شركة تسليك بيارات بالرياض تسليك بيارات شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Cleaning-councils-in-Riyadh.htmlشركة تنظيف مجالس بالرياض تنظيف مجالس بالرياض شكة تنظيف مجالس تنظيف مجالس بالرياض تنظيف مجالس شركة الاجنحة الذهبية

    ReplyDelete
  15. http://alagneha-alzhbih.blogspot.com.eg/2015/09/Cleaning-councils-in-Riyadh.htmlشركة تنظيف سجاد وموكيت بالرياض تنظيف سجاد تنظيف موكيت تنظيف بالرياض تنظيف سجاد تنظيف موكيت بالرياض شركة تنظيف سجاد وموكيت شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/12/Cleaning-swimming-pools-in-Riyadh.htmlشركة تنظيف مسابح بالرياض تنظيف مسابح تنظيف مسابح غسيل مسابح بالرياض تنظيف مسابح شركة تنظيف مسابح شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Detection-water-leaks-in-Riyadh.htmlشركة كشف تسربات المياه بالرياض كشف تسربات كشف التسربات بالرياض شركة كشف التسربات كشف كشف تسربات كشف تسربات بالرياض شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/12/Spray-pesticides-in-Riyadh.htmlشركة رش مبيدات 100%بالرياض رش مبيدات رش مبيدات شركة رش مبيدات بالرياض رش مبيدات رش مبيدات بالرياض شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/12/Moving-Furniture-in-Riyadh.html شركة نقل اثاث مع الفك والتركيب نقل اثاث بالرياض نقا اثاث مع الفك والتركيب بالرياض نقل عفش مع الفك والتركيب بالرياض شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/12/Combating-insects-in-Riyadh.html شركة مكافحة حشرات بالرياض مكافحة مكافحة مكافحة حشؤات بالرياض شركة مكافحة حشرات نكافحة حشرات بالرياض مكفحة جميع الحشرات بالرياض شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Cleaning-sewage-in-Riyadh.htmlتسليك مجاري بالرياض شركة تسليك مجاري تسليك مجالري بالرياض شركة تسليك مجاري بالرياض تسليك تسليك بالرياض شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Combating-bed-bugs-in-Riyadh.htmlشركة مكافحة بق الفراش مكافحة البق مكافحة بق الفراش بق بالرياض مكافحة مكافحة البق شركة مكافحة البق بالرياض مكافحة بق الفراش شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Combating-cockroaches-in-Riyadh.htmlشركة مكافحة الصراصير بالرياض مكافحة الصراصير شركة مكافحة بالرياض الصراصير مكافحة صراصير بالرياض شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Combating-Souss-wood-Riyadh.htmlشركة مكافحة سوس الخشب مكافحة السوس السوس مكافحة بالرياض شركة مكافحة سوس الخشب بالرياض شركة الاجنحة الذهبية

    ReplyDelete
  16. http://alagneha-alzhbih.blogspot.com.eg/2015/12/Cleaning-homes-in-Riyadh.htmlتنظيف منازل بالرياض تنظيف منازل تنظيف تنظيف منازل تنظيف تنظيف تنظيف بالرياض شركة تنظيف منازل بالرياض شركة الاجنحة الذهبية


    http://alagneha-alzhbih.blogspot.com.eg/2015/12/Insulate-roofs-in-Riyadh.htmlشركة عزل اسطح بالرياض عزل عزل عزل اسطح بالرياض عزل اسطح عزل اسطح عزل شركة عزل اسطح بالرياض شركة الاجنحة الذهبية


    http://alagneha-alzhbih.blogspot.com.eg/2015/10/Spraying-pesticides-in-Riyadh.htmlشركة رش مبيدات رش رش رش مبيدات رش مبيدات رش مبيدات بالرياض رش مبيدات رش مبيدات رش مبيدات بالرياض شركة الاجنحة الذهبية


    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Cleaning-apartments-in-Riyadh.html شركة تنظيف منازل وشقق تنظيف تنظيف شقق تنظيف منازل تنظيف فلل تنظيف بالرياض تنظيف منازل تنظيف منازل بالرياض شركة الاجنحة الذهبية


    http://alagneha-alzhbih.blogspot.com.eg/2015/10/Cleaning-facades-in-Riyadh.htmlشركة تنظيف واجهات تنظيف واجهات تنظيف واجهات بالرياض تنظيف بالرياض تنظيف واجهات تنظيف واجهات بالرياض شركة الاجنحة الذهبية


    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Moving-furniture-in-Riyadh.htmlشركة نقل اثاث بالرياض نقل عفش نقل اثاث نقل نقل اثاث نقل عفش بالرياض شركة نقل اثاث بالرياض شركة الاجنحة الذهبية

    http://alagneha-alzhbih.blogspot.com.eg/2015/09/Cleaning-reservoirs-in-Riyadh.htmlشركة تنظيف خزانات بالرياض تنظيف خزانات تنظيف بالرياض غسيل خزانات تنظيف خزانات بالرياض تنظيف غسيل خزانات شركة الاجنحة الذهبية

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.