wordpressのSyntaxHighlighterみたいな機能が、Bloggerに導入できないか検討しました。
検索した結果、
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する
というエントリーがあったので、そちらを参考にしながら、実装を進めました。
まず、
http://alexgorbatchev.com/pub/sh/current/styles/shCore.css
を参照する必要があるのですが、外部のファイルを参照すると、リンク切れを起こした場合に、
エラーになってしまうかつ、「縦スクロールバーを非表示にする」処理と、「IEで最後の行が横スクロールバーに隠れるのを防ぐ」処理をソースに各必要があったので、
| Bloggerの設定画面 ↓ テンプレート ↓ カスタマイズ ↓ アドバンス ↓ CSSを追加 |
に修正したCSSを貼り付けました。
同じノリで、
http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css
の内容も続けて貼り付けました。
次に、
http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js
を参照する必要があるのですが、こちらも
| Bloggerの設定画面 ↓ テンプレート ↓ HTMLの編集 ↓ 続行 |
の順で進み、</head>のすぐ上にコピペしました。
ただ、コピペするときに注意したいのが、XHTMLなので、
<script language="javascript" type="text/javascript"> // </script>とする必要があります。
続けて、最後に、
http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js
の内容もコピペして、
<script language="javascript" type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); </script>と書きました。
で、実行結果は、↓
<html> <head> <title>Test Code</title> </head> <body> This code is SyntaxHighlighter Sample Code. </body> </html>見事にちゃんと表示されました。
Objective-Cなどのソースを書くと、ものすごく横長になるし、汚くなってしまうので、これを使うことによって綺麗にまとめることができそうです。
0 コメント:
コメントを投稿