クリボウの 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:29

  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

  17. شركة تنظيف بالرياض التنظيف مهم جدا في حياتنا ومن هنا تم تخصيص شركة تسليك مجاري بالدمام فريق عمل بكل تجهيزات النظافة في مدينة الاحساء حتى نجعل كل منزل في الاحساء جميل نقي خالي من الاتربة لان عدم نظافة المنزل يؤدي الى امراض كثيرة ومعدية لذلك يجب الاهتمام بتنظيف الفيلا او الشقة او القصر وعمل قائمة اسبوعية او يومية لتنظيف وتنظيم المنزل من تنظيف المطابخ والحمامات اولا ثم شركة تنظيف شقق بالرياض والغرف وايضا تنظيف الدرايش والشبابيك وذلك من خلال شركة تخزين اثاث بالرياض .

    شركة عزل فوم تقوم الشركة بإستخدام أفضل الأجهزة التي تعمل على شركة عزل مائي بالرياض والمسطح بطريقة أكثر مهارة، وتستخدم أجود وأفضل الخامات والمواد ولديها طاقم هائل من الفنيين والعمالة المهرة التي تقدم الخدمة تخزين اثاث بشكل جيد، وتضمن للعملاء مستودعات تخزين اثاث بالرياض الحماية من التغيرات التي يتعرض لها المبنى، وهذه الخدمات تقدمها الشركة بأسعار مناسبة للجميع، حتى تجعلها في متناول جميع المستويات وتضمن حمايتهم من التلفيات . افضل شركة نقل اثاث بالدمام .

    تخزين الاثاث بالرياض

    شركة تخزين عفش

    تخزين اثاث بالرياض

    افضل شركة تخزين عفش

    مستودعات لحفظ الاثاث بالرياض

    شركات تخزين العفش بالرياض

    ReplyDelete

  18. من المعروف ان تنظيف المنازل من بين اهم الخدمات الضرورية في التنظيف والترقية بمنازلنا الى مصاف المنازل العصرية والتي عرفت تنظيفا عصريا من شانه ان يوفر لساكنته ظروفا حياتية راقية ولابد من توفر هيئة تختص في المجال مع تقديم ضمانات متكاملة من شانه ان تجعل الافراد يضمنون نجاح خدمة التنظيف ولا حاجة للمزيد من ضياع الاموال عبر طلبات خدمة تنظيف المنازل التي لا تلبي حاجياتهم ولا تتماشى مع رغباتهم لأن العديد من شركات تنظيف المنازل تسعى فقط الى عرض خدماتها عبر طرق ترويجية فحسب من اجل كسب المال فقط دون مراعاة الوازع الاخلاقي والضمير المهني الذي يحتم على مدراء مثل هاته الشركات ان يسعوا خلف ارضاء العملاء ليس اكثر من هذا عبر اتقان تنظيف المنازل .
    ومن اجل اثراء الواقع الخدماتي الذي يدخل في اطار تنظيف ونظافة المنازل اردنا ان نساهم معكم في ذلك، وذلك بالإعلان عن الخدمات المميزة في هذا المجال والتي ترفع شعار تنظيف المنازل والتي تحولت الى وجهة حقيقية يطلب خدماتها الالاف من عملاء تنظيف المنازل وكلهم امل ويقين وقناعة بالمستوى الراقي الذي تحققه الشركة لهم من جودة في تنظيف المنازل سرعة في تنظيف المنازل ,ضمان في تنظيف المنازل، انية في تنظيف المنازل، وهذا كله راجع لما تملكهمن امكانيات هامة في المجال من افضل اليات تنظيف المنازل، ارقى وسائل وإمكانيات تنظيف المنازل، جميع ارقى وأفضل مطهرات المنازل والتي ساعدت في انتشار تلك الشركات على نحو واسع من مناطق المدينة المنورة حتى اصبحت متداولة بين كل العملاء والواقع الميداني يشهد على صحة ما نقول عبر المنازل التي عرفت عمليات تنظيف واسعة النطاق ساعدت في رضا ملاكها بصورة متكاملة من الضمان.
    شركة تنظيف بالطائف

    شركة نقل عفش بتبوك

    شركة عزل خزنات بتبوك

    شركة تنظيف مجالس بتبوك

    شركة تنظيف خزانات بتبوك

    شركة تسليك مجارى بتبوك

    شركة تنظيف شقق بتبوك

    شركة مكافحة حشرات بتيوك

    ReplyDelete
  19. من المعروف ان تنظيف المنازل من بين اهم الخدمات الضرورية في التنظيف والترقية بمنازلنا الى مصاف المنازل العصرية والتي عرفت تنظيفا عصريا من شانه ان يوفر لساكنته ظروفا حياتية راقية ولابد من توفر هيئة تختص في المجال مع تقديم ضمانات متكاملة من شانه ان تجعل الافراد يضمنون نجاح خدمة التنظيف ولا حاجة للمزيد من ضياع الاموال عبر طلبات خدمة تنظيف المنازل التي لا تلبي حاجياتهم ولا تتماشى مع رغباتهم لأن العديد من شركات تنظيف المنازل تسعى فقط الى عرض خدماتها عبر طرق ترويجية فحسب من اجل كسب المال فقط دون مراعاة الوازع الاخلاقي والضمير المهني الذي يحتم على مدراء مثل هاته الشركات ان يسعوا خلف ارضاء العملاء ليس اكثر من هذا عبر اتقان تنظيف المنازل .
    ومن اجل اثراء الواقع الخدماتي الذي يدخل في اطار تنظيف ونظافة المنازل اردنا ان نساهم معكم في ذلك، وذلك بالإعلان عن الخدمات المميزة في هذا المجال والتي ترفع شعار تنظيف المنازل والتي تحولت الى وجهة حقيقية يطلب خدماتها الالاف من عملاء تنظيف المنازل وكلهم امل ويقين وقناعة بالمستوى الراقي الذي تحققه الشركة لهم من جودة في تنظيف المنازل سرعة في تنظيف المنازل ,ضمان في تنظيف المنازل، انية في تنظيف المنازل، وهذا كله راجع لما تملكهمن امكانيات هامة في المجال من افضل اليات تنظيف المنازل، ارقى وسائل وإمكانيات تنظيف المنازل، جميع ارقى وأفضل مطهرات المنازل والتي ساعدت في انتشار تلك الشركات على نحو واسع من مناطق المدينة المنورة حتى اصبحت متداولة بين كل العملاء والواقع الميداني يشهد على صحة ما نقول عبر المنازل التي عرفت عمليات تنظيف واسعة النطاق ساعدت في رضا ملاكها بصورة متكاملة من الضمان.
    شركة كشف تسربات المياه بالرياض
    شركة تسليك مجارى بالرياض
    شركة عزل خزانات بالرياض
    شركة تنظيف خزانات بالرياض
    شركة تنظيف مجالس بالرياض
    شركة نظافة عامة بالرياض
    شركة تنظيف منازل وبيوت وفلل وقصور بالرياض
    شركة نقل عفش بالرياض
    شركة مكافحة حشرات بالرياض
    شركة تنظيف شقق بالرياض

    ReplyDelete
  20. من المعروف ان تنظيف المنازل من بين اهم الخدمات الضرورية في التنظيف والترقية بمنازلنا الى مصاف المنازل العصرية والتي عرفت تنظيفا عصريا من شانه ان يوفر لساكنته ظروفا حياتية راقية ولابد من توفر هيئة تختص في المجال مع تقديم ضمانات متكاملة من شانه ان تجعل الافراد يضمنون نجاح خدمة التنظيف ولا حاجة للمزيد من ضياع الاموال عبر طلبات خدمة تنظيف المنازل التي لا تلبي حاجياتهم ولا تتماشى مع رغباتهم لأن العديد من شركات تنظيف المنازل تسعى فقط الى عرض خدماتها عبر طرق ترويجية فحسب من اجل كسب المال فقط دون مراعاة الوازع الاخلاقي والضمير المهني الذي يحتم على مدراء مثل هاته الشركات ان يسعوا خلف ارضاء العملاء ليس اكثر من هذا عبر اتقان تنظيف المنازل .
    ومن اجل اثراء الواقع الخدماتي الذي يدخل في اطار تنظيف ونظافة المنازل اردنا ان نساهم معكم في ذلك، وذلك بالإعلان عن الخدمات المميزة في هذا المجال والتي ترفع شعار تنظيف المنازل والتي تحولت الى وجهة حقيقية يطلب خدماتها الالاف من عملاء تنظيف المنازل وكلهم امل ويقين وقناعة بالمستوى الراقي الذي تحققه الشركة لهم من جودة في تنظيف المنازل سرعة في تنظيف المنازل ,ضمان في تنظيف المنازل، انية في تنظيف المنازل، وهذا كله راجع لما تملكهمن امكانيات هامة في المجال من افضل اليات تنظيف المنازل، ارقى وسائل وإمكانيات تنظيف المنازل، جميع ارقى وأفضل مطهرات المنازل والتي ساعدت في انتشار تلك الشركات على نحو واسع من مناطق المدينة المنورة حتى اصبحت متداولة بين كل العملاء والواقع الميداني يشهد على صحة ما نقول عبر المنازل التي عرفت عمليات تنظيف واسعة النطاق ساعدت في رضا ملاكها بصورة متكاملة من الضمان.
    شركة تنظيف بالطائف

    شركة نقل عفش بتبوك

    شركة عزل خزنات بتبوك

    شركة تنظيف مجالس بتبوك

    شركة تنظيف خزانات بتبوك

    شركة تسليك مجارى بتبوك

    شركة تنظيف شقق بتبوك

    شركة مكافحة حشرات بتيوك

    شركة تنيظف منازل بتبوك

    شركة تنظيف شقق وفلل بتبوك

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.