Gistで書いたコードを行番号つきでBloggerに埋め込む

Gistを使えば簡単なコード断片を管理して他の人と共有できるらしい（いまさら）．gitレポジトリなので色々gitっぽく使えるらしい．Gistで書いたコードをBloggerに埋め込んでみる．

Gistでコードを書いて保存して，

embedをクリックするとスクリプトのリンク表示されるのでコピーして，

HTMLモードで編集して貼り付ける．

すると以下のように表示されます．

	#!/usr/bin/env python
	# -*- coding: utf-8 -*-
	if __name__ == '__main__':
	print "Hello, world!"

view raw hello.py hosted with ❤ by GitHub

デフォルトだと行番号は表示されないので．表示させるために https://gist.github.com/454771 を参考にBloggerのレイアウトに以下のHTML/Javascriptガジェットを追加しました．（※他の場所でjQueryが読み込まれている必要があります．なんか番号のふられ方微妙だから後で直すかな…直して行番号は選択されないようにしました）

	<!-- add line number to gist -->
	<script type="text/javascript">
	$('.gist').each(function() {
	$('.line',this).each(function(i, e) {
	$(this).prepend(
	$('<div/>').attr('unselectable','on').css({
	'float' : 'left',
	'width': '30px',
	'font-weight' : 'bold',
	'color': 'grey',
	'-moz-user-select': 'none',
	'-webkit-user-select': 'none'
	}).text(++i)
	);
	});
	});
	</script>

view raw gistfile1.html hosted with ❤ by GitHub

追記

without jQuery

	<!-- add line number to gist -->
	<script type="text/javascript">
	var gists = document.getElementsByClassName('gist');
	for (var i = 0; i < gists.length; i++) {
	var lines = gists[i].getElementsByClassName('line');
	for (var j = 0; j < lines.length; j++) {
	var div = document.createElement('div');
	div.innerHTML = j + 1;
	div.style.cssFloat = 'left';
	div.style.width = '30px';
	div.style.fontWeight = 'bold';
	div.style.color = 'grey';
	div.style.MozUserSelect = 'none';
	div.style.webkitUserSelect = 'none';
	div.setAttribute('unselectable', 'on');
	lines[j].insertBefore(div, lines[j].childNodes[0]);
	}
	}
	</script>

view raw gistfile1.html hosted with ❤ by GitHub