クリボウの Blogger Tips

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

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

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

Posted at: 2008-04-13 Label: 9

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

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


導入方法

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



利用方法

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

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

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



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

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


関連:


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

Comments:9

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

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

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

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

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

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

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

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

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

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

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.