>--> コードをハイライトする「Code Prettify」ウィジェット | クリボウの Blogger Tips

クリボウの Blogger Tips

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

> > コードをハイライトする「Code Prettify」ウィジェット

コードをハイライトする「Code Prettify」ウィジェット

Posted at: 2008-04-13 Label: 10

久しぶりに、新しいウィジェットを作成してみました。
参考にしたのはこちらです。

今回のウィジェットは、ブログ内でコードを紹介するときに、自動的にハイライト表示するためのもの。Google の Code Prettify というツールを利用しています。Code Prettify で実際にどのようにコードが色分けされるのかは、デモページをご覧下さい。


導入方法

下の「Add to Blogger」をクリックすると、「ページ要素を追加」画面が開きます。ウィジェットを追加するブログを選択して、タイトルは空欄のまま、「ウィジェットを追加」ボタンを押してください。手順はこれだけです。



利用方法

投稿内で、色分けの対象にしたいコードを
<pre class="prettyprint">
(コード)
</pre>
のように記述するだけ。

<> をコードとして表示したい場合には、それぞれ &lt;&gt; に書き換えてください。面倒だという人は、下の変換ツールをどうぞ。

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



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

ということで、ぜひぜひご利用くださーい。


関連:


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

Comments:10

  1. ちょうど探していた機能なので助かりました。

    それと記事にリンクさせて頂いたんですが、
    上手くいってなかったらゴメンナサイm(_ _)m

    ReplyDelete
  2. Bloggerデビューしたてで、とても困っていましたので、ウィジェットを使わせて頂きました。
    ありがとうございます。

    ReplyDelete
  3. あぁ!テンプレート変更の関係か、変換ツールが動かなくなっているような気がします(ノ_・。)

    ReplyDelete
  4. > すなふさん
    ほんとですね!また動くようにしたので、ご活用ください。ご報告ありがとうございます。

    ReplyDelete
  5. ありがとうございます!楽させて頂いてますw

    ReplyDelete
  6. 助かりました!!!ありがとうございます。

    ReplyDelete
  7. 参考にさせていただきました!

    ReplyDelete
  8. ありがとうございました。利用させて頂きます。

    ReplyDelete
  9. 利用させて頂きます!便利!

    ReplyDelete
  10. Promo Online via Bandar Ceme Online Tobolsk Situs www.pokerrusia.me Melalui Bank Mayapada Indonesia Kode Bank 097. 

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.