highlightjs 简单使用
效果如下
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="./styles/solarized-dark.css"> <!--加载相关的css-->
<script src="./highlight.pack.js"></script> <!--加载相关的js-->
<script src="./highlightjs-line-numbers.js"></script> <!--加载line number 插件-->
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>
<style>
.hljs-line-numbers {
text-align: right;
border-right: 1px solid #ccc;
color: #999;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
pre {
position: relative;
margin-bottom: 24px;
border-radius: 3px;
border: 1px solid #C3CCD0;
background: #FFF;
overflow: hidden;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<pre><code class="python">@requires_authorization <!-- code 标签注意，要紧贴着写，不然有空行 (话说这是什么鬼?)-->
def somefunc(param1='', param2=0):
r'''A docstring'''
if param1 > param2: # interesting
print 'Gre\'ater'
return (param2 - param1 + 1 + 0b10l) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt''</code> <!-- 这里最好也是紧贴着，不然也会出现空行 -->
</pre>
</body>
</html>
line number 有个缺点，如果代码有换行，会乱掉！自带没有，highlightjs 官方是这么解释的，我也不想用了
it might actually make it worse simply by making it look more bloated in blog posts around the Internet.