2012年4月25日水曜日

Bloggerでソースコードをスタイルシートで綺麗に見せる方法【prettify.css, prettify.js】

Bloggerの場合を書きますが、おそらく普通のブログサイトでもテンプレート的なHTMLさえ編集できれば使えると思います。

①Bloggerにログイン後、左メニューから「テンプレート」→「HTMLの編集」でHTMLを編集
(このとき警告のようなダイアログが出現するが「続行」をクリックする)

②HTMLの編集画面になった以下の2箇所にソースコードを追加する

1. <head>タグの中に以下の1文を追加
---
<link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"/>
---
⇒「<head>」などで検索するとすぐに該当の場所に飛べます

2. </body>の終了タグの直前に以下の2文を追加
---
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script>prettyPrint();</script>
---
⇒「</body> 」で検索してすぐ上に貼り付けてしまいましょう

③対象のソースコードを以下のタグで囲ってみましょう
---
<pre class="prettyprint linenums">
XXX
</pre>
---

一応これでできるはず・・・自分はこのスタイル背景とかが綺麗に表示されなかったのでちょっとやめてしまいましたがw
できない場合は対象のcssとjsファイルが存在しているか確認するといいかと思います
http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js
http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css

まぁ書いていて思ったんですが、
なんか「シンタックスハイライト」とか「Syntax Highlighter」とかで検索するともっと良い感じの情報に出会えるかもしれませんw
あとは自分で<pre>に対してスタイルシート適用して作っちゃうとかねw

まぁいろいろと応用が効く方法だと思ったので、一応メモがてらに書いておきました。
参考までにー

0 件のコメント:

コメントを投稿