关于代码高亮和显示代码行号的办法

发表于 | 分类于 |

据说mistune比markdown好用，于是兴冲冲的安装了。
另外还有Pygments
好吧，费了半天劲才能正常的显示。
还是英文说明文档的问题，看的太费劲了。

我先测试测试Python语法会不会高亮 

1
2
3
4
5
6
7
8
9
10
11
12
13
#highlights.py
import mistune
from pygments import highlight
from pygments.lexers import get_lexer_by_name
from pygments.formatters import html

class HighlightRenderer(mistune.Renderer):
    def block_code(self, code, lang=None):
        if not lang:
            return '\n<pre><code>%s</code></pre>\n' % mistune.escape(code)
        lexer = get_lexer_by_name(lang, stripall = True)
        formatter = html.HtmlFormatter(linenos=True, cssclass='codehilite')
        return highlight(code, lexer, formatter)

好吧，Python还不高亮，关于Markdown标记的语法还是有问题的，或者说是后台pygments处理的时候有问题。

好像后台pygments不会把````python后面的代码转成

`这样的html代码，于是前端mistune不知道该怎么处理。

但是我如果用html标记，就可以正常解析。

另外的难点还是陌生的语言的支持吧，比如.ini文件和.conf文件语言的识别。

虽然Pygments支持的语言有很种，但是就是可能默认的语言处理功能有点弱，就是上面那几行代码。

后台预览markdown的功能太差了，看来要换了，后台和前台根本就不一致。换掉Markdownx。

今天又来更新

我错了，昨天怎么弄也不行的代码高亮，今天莫名其妙的就好了。

只需要把代码部分前面加上````lang，这里的lang可用的字段，貌似可以从Pygments其官网找到，链接如下：<http://pygments.org/docs/lexers/>，就是其Short Names字段的值。 首先当然是安装mistune和pygments`，如果项目在虚拟环境，就进虚拟环境安装。

1
2
pip install mistune
pip install pygments

然后新建highlights.py文件，文件代码见上面。
再然后，在view.py文件中加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
#view.py
...
import mistune
from highlights import HighlightRenderer
...
def detail(request, pk) #就是博客详情渲染页面
    post = get_object_or_404(Post, pk=pk)
    renderer = HighlightRenderer()
    markdown = mistune.Markdown(renderer=renderer, hard_wrap=True)
    post.text = markdown(post.text)
    return render(request, 'post/detail.html', context={'post': post})
...

然后我放了一段js代码在三个反引号中间，类似这样：

1
2
3
$(document).ready(function(){
    console.log('Hello, World!');
});

或者放一段html代码在三个反引号中间，类似这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
...
<div id="header">
	<div class="site-name">
		<h1 class="hidden">唐僧肉片</h1>
		<a id="logo" href="/Blog">唐僧肉片</a>
		<p class="description">每个人都身怀天赋，但如果用会不会爬树的能力来评判一只鱼，它会终其一生以为自己愚蠢。</p>

	</div>
	<div id="nav-menu">
		<a href="/Blog" class="current">
			<i class="fa fa-home">首页</i>
		</a>
		<a href="javascript:;">
			<i class="fa fa-archive">归档</i>
		</a>
		<a href="javascript:;">
			<i class="fa fa-user">关于</i>
		</a>
		<a href="javascript:;">
			<i class="fa fa-book">历史</i>
		</a>
		<a href="javascript:;">
			<i class="fa fa-comments">留言</i>
		</a>
		<a href="javascript:;">
			<i class="fa fa-rss">订阅</i>
		</a>
	</div>
</div>
...

或者一段css代码放到三个反引号中间，类似这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.codehilite.hll { background-color: #ffffcc }
.codehilite.c { color: #60a0b0; font-style: italic } /* Comment */
.codehilite.err { border: 1px solid #FF0000 } /* Error */
.codehilite.k { color: #007020; font-weight: bold } /* Keyword */
.codehilite.o { color: #666666 } /* Operator */
.codehilite.cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
.codehilite.cp { color: #007020 } /* Comment.Preproc */
.codehilite.c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
.codehilite.cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
.codehilite.gd { color: #A00000 } /* Generic.Deleted */
.codehilite.ge { font-style: italic } /* Generic.Emph */
.codehilite.gr { color: #FF0000 } /* Generic.Error */
.codehilite.gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite.gi { color: #00A000 } /* Generic.Inserted */
.codehilite.go { color: #808080 } /* Generic.Output */
.codehilite.gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.codehilite.gs { font-weight: bold } /* Generic.Strong */
.codehilite.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite.gt { color: #0040D0 } /* Generic.Traceback */
.codehilite.kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.codehilite.kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.codehilite.kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.codehilite.kp { color: #007020 } /* Keyword.Pseudo */
.codehilite.kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.codehilite.kt { color: #902000 } /* Keyword.Type */
.codehilite.m { color: #40a070 } /* Literal.Number */
.codehilite.s { color: #4070a0 } /* Literal.String */
.codehilite.na { color: #4070a0 } /* Name.Attribute */
.codehilite.nb { color: #007020 } /* Name.Builtin */
.codehilite.nc { color: #0e84b5; font-weight: bold } /* Name.Class */
.codehilite.no { color: #60add5 } /* Name.Constant */
.codehilite.nd { color: #555555; font-weight: bold } /* Name.Decorator */
.codehilite.ni { color: #d55537; font-weight: bold } /* Name.Entity */
.codehilite.ne { color: #007020 } /* Name.Exception */
.codehilite.nf { color: #06287e } /* Name.Function */
.codehilite.nl { color: #002070; font-weight: bold } /* Name.Label */
.codehilite.nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.codehilite.nt { color: #062873; font-weight: bold } /* Name.Tag */
.codehilite.nv { color: #bb60d5 } /* Name.Variable */
.codehilite.ow { color: #007020; font-weight: bold } /* Operator.Word */
.codehilite.w { color: #bbbbbb } /* Text.Whitespace */
.codehilite.mf { color: #40a070 } /* Literal.Number.Float */
.codehilite.mh { color: #40a070 } /* Literal.Number.Hex */
.codehilite.mi { color: #40a070 } /* Literal.Number.Integer */
.codehilite.mo { color: #40a070 } /* Literal.Number.Oct */
.codehilite.sb { color: #4070a0 } /* Literal.String.Backtick */
.codehilite.sc { color: #4070a0 } /* Literal.String.Char */
.codehilite.sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
.codehilite.s2 { color: #4070a0 } /* Literal.String.Double */
.codehilite.se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
.codehilite.sh { color: #4070a0 } /* Literal.String.Heredoc */
.codehilite.si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
.codehilite.sx { color: #c65d09 } /* Literal.String.Other */
.codehilite.sr { color: #235388 } /* Literal.String.Regex */
.codehilite.s1 { color: #4070a0 } /* Literal.String.Single */
.codehilite.ss { color: #517918 } /* Literal.String.Symbol */
.codehilite.bp { color: #007020 } /* Name.Builtin.Pseudo */
.codehilite.vc { color: #bb60d5 } /* Name.Variable.Class */
.codehilite.vg { color: #bb60d5 } /* Name.Variable.Global */
.codehilite.vi { color: #bb60d5 } /* Name.Variable.Instance */
.codehilite.il { color: #40a070 } /* Literal.Number.Integer.Long */

反引号就是主键盘数字1左边，Tab键上面的那个键，直接按下去就是反引号。

其实这个时候html代码已经翻译完成了，但是代码并不会高亮显示。这个时候需要引入css文件。

PS： 因为教程的原因，下载了highlight的好几个css文件，每个文件里面的样式都是以codehilite开头的，所以上面的highlights.py中的HtmlFormatter加入了参数cssclass='codehilite'。

只要把css文件放入static目录，并正确引用就可以了。css代码类似于上面我贴的那一段，就是指定了一些文字的颜色。