2011/09/26

SyntaxHighlighterをウィジェットに

いつのまにかBloggerのテンプレートも若干スマートフォン対応していたので使ってみた

設定→メールとモバイル→モバイル テンプレート
ここで、はいを選択すると有効にできる

ドロップダウンでデフォルトを選択していると
デザインのテンプレートデザイナーで選択しているテンプレートのモバイル用が使われて
テンプレートデザイナーで編集した設定も一部使えるんだけど
いつものノリでHTMLを直接編集すると何故かモバイル用には使われなくなってしまう模様
今まではHEADタグの中に書き加えていたんだけどうまくできなくなってしまった

PC用で変更を加えたテンプレートをモバイル用でも使いたい場合は
HTMLの編集はしてはいけないみたい
なのでウィジェットからSyntaxHighlighterを使えるようにしてみました
というのが以下のスクリプト
JavaScriptはよくわからないから適当にぐぐって書いてみただけなので
もっと良い書き方があるかもしれないけど、、

ガジェットの追加→HTML/JavaScript に貼り付けると使えるようになります
使い方はまえと同じ
ちなみにモバイル用にはウィジェットが表示されないのでハイライトはされない



<script type="text/javascript">

function loadCss(href) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = href;

head.appendChild(link);
}

function loadScript(src) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;

document.body.appendChild(script);
}

loadCss('http://alexgorbatchev.com/pub/sh/current/styles/shCore.css');
loadCss('http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css');

loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js');
loadScript('http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js');

</script>

<script type="text/javascript">

var interval = setInterval(function() {
if (SyntaxHighlighter == null) return;

clearInterval(interval);
interval = null;

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
}, 1000);

</script>

0 件のコメント:

コメントを投稿