Tips: 本文创建于2017年4月11日,已超过 2 年,内容或图片可能已经失效！

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.