<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery自动生成代码行号特效</title>
<style>
/* for demo only */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Consolas';
}
p {
font-size: 14px;
line-height: 22px;
}
/* tweak css as per your need */
.lineline {
max-height: 300px;
width: 700px;
margin: 50px auto 0;
background: #ececec;
padding: 20px;
overflow: auto;
text-align: left;
}
.lineline-numbers {
width: 20px;
border-right: 1px solid #ccc;
padding-right: 5px;
color: #777;
}
.lineline-lines {
padding-left: 20px;
white-space: pre;
white-space: -moz-pre;
white-space: -pre;
white-space: -o-pre;
word-wrap: break-word;
}
.lineline-code {
font-family: 'Consolas';
font-size: 12px;
line-height: 18px;
width: 100%;
white-space: nowrap;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div style="text-align: center; margin:15px auto 30px auto;">
</div>
<textarea>/* --- Reset Elements – Start --- */
* { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html, body { width: 100% !important; height: 100% !important; margin: 0; padding: 0; }
p,h1,h2,h3,h4 { margin: 0; padding: 0; }
/* --- Reset Elements – Reset --- */
/* --- Global Style – Start --- */
a:link { color: #007ee5; text-decoration: none; }
a:visited { color: #007ee5; text-decoration: none; }
body, td, th, div, span { font-family: 'Open Sans'!important; font-size: 13px; }
/* --- Reset Elements – Start --- */
* { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html, body { width: 100% !important; height: 100% !important; margin: 0; padding: 0; }
p,h1,h2,h3,h4 { margin: 0; padding: 0; }
/* --- Reset Elements – Reset --- */
/* --- Global Style – Start --- */
a:link { color: #007ee5; text-decoration: none; }
a:visited { color: #007ee5; text-decoration: none; }
body, td, th, div, span { font-family: 'Open Sans'!important; font-size: 13px; }</textarea>
<pre>This is a pre element
<script src="js/jquery.js"></script>
<script src="js/jquery.lineline.js"></script>
by sc.chinaz.com</pre>
<br>
<br>
<br>
<br>
<script src="js/jquery.js"></script>
<script src="js/jquery.lineline.js"></script>
<script>
jQuery(document).ready(function($) {
$('textarea,pre').lineLine();
});
</script>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
