いくつか方法はあるようだが、Googleがjavascriptを公開していた。
google-code-prettify
ダウンロードして解凍してできた
prettify.css
prettify.js
を使用すればよい・・・のだがBloggerではファイルをアップロードできないので単純に利用できない。
この記事↓
Blogger でも、コードハイライト してみる。by google-code-prettify
に方法が書いてあったが、どうもうまくいかない。
「ページ要素追加」でソース内容をべた書きした場合、bodyタグ内にソースが埋め込まれる。
bodyタグのonloadで関数を指定しているが、その宣言がbodyタグ内にある場合まだその関数は定義されて無いんじゃないかな・・・
たぶん、headタグ内に書けばいいと思い、 実際にprettify.cssとprettify.jsの中身をテンプレートの編集からheadタグ内にべた書きしてみたら うまくいった。
[レイアウト]→[HTMLの編集]のページでテンプレートを編集。
headタグの直下に上記２ファイルの内容をべた書きし、さらに↓のようにする。
<body onload='prettyPrint()'>
ただ、ソースの内容を本当にそのままコピペしたのではなくprettify.jsの先頭にあるコメント部分をコピーしなかった（というかコピーしたらエラーになった）。
で、ハイライトしたい場合は、
<pre class='prettyprint'> ここにコードを書く </pre>のようにして使う。
これで問題ないのだが、テンプレートを変更するたびに編集しなければいけない。
で、さらに調べていたらこんな記事があった。
Blogger でソースコードに色付けをする - google-code-prettify
このページではGoogle Page Creatorを利用する方法が紹介されていた。
なるほどこれは便利。Blogger利用者はGmailアカウントを持ってるだろうから、こっちの方がいいかな。
pre要素にスクロールバーを表示する設定も書いてあったがどうもうまくいかない。
↓によると、
pre要素にoverflow
どうやらIEのバグのようなのだが、widthを設定してあげてもスクロールバーは表示してくれない・・・。
0 件のコメント:
コメントを投稿