dustinlakin/gist:1291980

## gistfile1.phtml
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style>
            .lineNumber {
                text-align: right;
                font-size: 14px;
                font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace;
            }

            #numbers{
                border-width: 1px 0px 1px 1px;
                border-style: dotted;
                border-color: #DEDEDE;
                background: ghostwhite;
                float: left;
                overflow: hidden;
                padding-top: 2px;
                padding-right: 3px;
            }
            #selected{
                position: absolute;
                width:0;
                height:17px;
                background: red;
                opacity: .2;
            }

        </style>
    </head>
    <body style="font-size: 12px;">
        <div id="container" style="position:relative; width:479px;">
            <div id="selected">

            </div>
            <div id="numbers" style="">

            </div>
            <div id="code" style="width:450px; float: left;">
                <script src="https://gist.github.com/1167249.js?file=bryun.php"></script>
            </div>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var html = "";
                for(var i = 1; i < Math.round($(".gist-data").height()/10); i++){
                    html += '<div class="lineNumber" style="height:' + $("#LC" + i).height() +'px">' + i + '</div>';
                }

                $("#numbers").css({
                    height: $(".gist-data").height() -5,
                    width: 20
                }).html(html)
            })

            function selectLines(from,to){
                var top = $("#LC"+from).position().top-1;
                var height = $("#LC"+to).position().top - top + $("#LC"+to).height();
                $("#selected").animate({
                    top: top,
                    height: height,
                    width: $("#container").width()
                },1000);
            }
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style>
	.lineNumber {
	text-align: right;
	font-size: 14px;
	font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace;
	}

	#numbers{
	border-width: 1px 0px 1px 1px;
	border-style: dotted;
	border-color: #DEDEDE;
	background: ghostwhite;
	float: left;
	overflow: hidden;
	padding-top: 2px;
	padding-right: 3px;
	}
	#selected{
	position: absolute;
	width:0;
	height:17px;
	background: red;
	opacity: .2;
	}

	</style>
	</head>
	<body style="font-size: 12px;">
	<div id="container" style="position:relative; width:479px;">
	<div id="selected">

	</div>
	<div id="numbers" style="">

	</div>
	<div id="code" style="width:450px; float: left;">
	<script src="https://gist.github.com/1167249.js?file=bryun.php"></script>
	</div>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
	var html = "";
	for(var i = 1; i < Math.round($(".gist-data").height()/10); i++){
	html += '<div class="lineNumber" style="height:' + $("#LC" + i).height() +'px">' + i + '</div>';
	}

	$("#numbers").css({
	height: $(".gist-data").height() -5,
	width: 20
	}).html(html)
	})

	function selectLines(from,to){
	var top = $("#LC"+from).position().top-1;
	var height = $("#LC"+to).position().top - top + $("#LC"+to).height();
	$("#selected").animate({
	top: top,
	height: height,
	width: $("#container").width()
	},1000);
	}
	</script>
	</body>
	</html>