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

据说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不会把

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

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

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

----------

## 今天又来更新

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

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

```python
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代码类似于上面我贴的那一段,就是指定了一些文字的颜色。