Google Sites で使えるSyntaxHighlighterガジェットを作ってみた(C++向け)

　世の中には便利なものを作ってくれる方がいるもので、HPやブログに使えるSyntaxHighlighterというJavascriptのライブラリが存在します。

• SyntaxHighlighter

対応言語も広く、C++にも対応していたので、これをGoogleGadgetとして仕立て直したらいろいろ使えるかも？と思って作ってみました。ただ、同じことを考える人もいるようで、すでにネットには同じ事をした別の人のGadgetもあります。３番煎じくらいですか。他と違うのは、C++に特化させたため、他言語には使えないこと、.jsファイルや.cssファイルを直に書きこんでいることです。ライセンス的にどうなのかな？と思いましたが、MITライセンスだし多分大丈夫だろうと言うことで。何かあればご一報ください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
	<ModulePrefs
		title="SyntaxHighlight for CPP"
		title_url="http://alexgorbatchev.com/SyntaxHighlighter/index.html"
		author="Original:alexgorbatchev&apos; Gadget:@chichimotsu"
	>
		<Locale lang="ja" country="jp" />
		<Require feature="dynamic-height" />
		<Require feature="setprefs"/>
		<Require feature="opensocial-0.8"/>
	</ModulePrefs>
	<UserPref name="codes" display_name="your codes" type="hidden"/>
	<Content type="html" view="configuration" preferred_height="400"><![CDATA[
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<div style="font-size:20pt; text-align:left;">SyntaxHighlighter for Cpp</div>
		<div style="font-size:12pt; text-aligh:left;">Put your Codes:</div>
		<textarea style="width:400px;height:300px;" id="conf_codes" onchange="Update()"></textarea>
		<script type="text/javascript"><!--
			var prefs = new gadgets.Prefs();
			
			function Update(){
				var _conf_codes = $('#conf_codes').val();
				_conf_codes = gadgets.util.escapeString(_conf_codes);
				prefs.set('codes', _conf_codes);
				setTimeout(function() {gadgets.window.adjustHeight();}, 1000);
			};
			
			function Init(){
				var _conf_codes = prefs.getString("codes");
				_conf_codes = gadgets.util.unescapeString(_conf_codes);
				$('#conf_codes').val(_conf_codes);
				Update();
			};
			
			gadgets.util.registerOnLoadHandler(Init);
			setTimeout(function() {gadgets.window.adjustHeight();}, 1000);
		-->
		</script>
	]]>
	</Content>

　ここまでがガジェットの本体の宣言および設定画面のデザインや機能を書いてあります。この下に本家のオリジナルからそのままコピーしたshCore.js、shBrushCpp.js、shCore.css、shDEfaultTheme.cssをインクルードします。僕が作ったやつは直書きですが、普通にどこかサーバーにアップロードしてscriptタグおよびlinkタグでインクルードするのもOKです。

	<Content type="html">
	<![CDATA[
	<!-- ここで本家の4つのファイルをインクルードする！ -->
	<script type="text/javascript"><!--	// Original
function OutCodes(outcodes)
{
	var sc = document.createElement('script');
	sc.setAttribute('type', 'syntaxhighlighter');
	sc.setAttribute('class', 'brush:cpp');
	$(sc).html("<" + "![CDA" + "TA[" + outcodes + "]" + "]>");
	$('#codesdiv').html(sc);
	
	return;
};

$(document).ready(function()
{
	var prefs = new gadgets.Prefs();
	var getcodes = prefs.getString('codes');
	getcodes = gadgets.util.unescapeString(getcodes);
	OutCodes(getcodes);
	SyntaxHighlighter.highlight();
	setTimeout(function() {gadgets.window.adjustHeight();}, 1000);
});
-->
</script>
<div>
	<div id="codesdiv"></div>
</div>
<script type="text/javascript">
	setTimeout(function() {gadgets.window.adjustHeight();}, 1000);
</script>
	]]>
	</Content>
</Module>

で、ここまでが本家のファイルをインクルードした後のコードです。

　ちなみに、使って見たサンプルはこちら。色には若干不満があるので今後オリジナルテーマとして変えるかもしれませんが、とりあえず完成ということで。出来たデータはここに上げておきます。GoogleSitesで利用する場合は、このデータを添付ファイルとしてアップロードし、そのURLをガジェットURLとして指定すれば利用できます。

追記
保存されるコードは、GoogleGadgetの仕様上2KByteまでです。それ以上のデータは削除されますので、注意してください。