ghost 添加代码高亮记录
记录一下我在 ghost 里面实现的代码高亮
代码高亮有 3 种
- Prism.js
- highlight.js
- Rainbow.js
我目前用的是 Prism.js , 简单记录一下添加步骤
进入管理员面板 Setting -> Code Injection
在 Blog Header 内添加主题的 CSS, 比如: prism-okaidia.min.css
1
<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-okaidia.min.css" rel="stylesheet" />
然后在 Blog Footer 添加一些 javascript
1
2
3
4
5
6
7
8
9
<!-- Core 必须的 --->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
<!-- 对应语言的高亮代码, 根据需要添加 -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-css.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-java.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-c.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-csharp.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-javascript.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-python.min.js"></script>
有一些加入可能会有冲突, 导致 ghost 会 502 错误, 我就碰到了, 折腾了好久才发现是这个问题.本来是有加 git, vim, markdown, json, 删了这几个就正常了, 不知道什么问题. 难道要换一个试试?
然后就可以用 Markdown 编辑器添加代码块需要高亮的语言选项了, 如下
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
Prism.languages.python = {
'comment': {
pattern: /(^|[^\\])#.*/,
lookbehind: true
},
'triple-quoted-string': {
pattern: /("""|''')[\s\S]+?\1/,
greedy: true,
alias: 'string'
},
'string': {
pattern: /("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,
greedy: true
},
'function': {
pattern: /((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,
lookbehind: true
},
'class-name': {
pattern: /(\bclass\s+)\w+/i,
lookbehind: true
},
'keyword': /\b(?:as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|nonlocal|pass|print|raise|return|try|while|with|yield)\b/,
'builtin':/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,
'boolean': /\b(?:True|False|None)\b/,
'number': /(?:\b(?=\d)|\B(?=\.))(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,
'operator': /[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]|\b(?:or|and|not)\b/,
'punctuation': /[{}[\];(),.:]/
};
显示结果, 加了 line-numbers 插件:
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
Prism.languages.python = {
'comment': {
pattern: /(^|[^\\])#.*/,
lookbehind: true
},
'triple-quoted-string': {
pattern: /("""|''')[\s\S]+?\1/,
greedy: true,
alias: 'string'
},
'string': {
pattern: /("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,
greedy: true
},
'function': {
pattern: /((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,
lookbehind: true
},
'class-name': {
pattern: /(\bclass\s+)\w+/i,
lookbehind: true
},
'keyword': /\b(?:as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|nonlocal|pass|print|raise|return|try|while|with|yield)\b/,
'builtin':/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,
'boolean': /\b(?:True|False|None)\b/,
'number': /(?:\b(?=\d)|\B(?=\.))(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,
'operator': /[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]|\b(?:or|and|not)\b/,
'punctuation': /[{}[\];(),.:]/
};
资源建议从 CDNjs 上直接调用, 当然也是可以从 官网上下载 的.
添加 line-numbers 插件
就是把 css,js 文件放到对应的地方, 然后在 markdown 的代码块里面加上 line-numbers 就可以了, 比如:
javascript,line-numbers
一些个代码
Toolbar 插件的 css 似乎会导致 代码框 不好看了.
如何用下载的自定义文件
把 prism.css 文件放到 主题文件夹下的 assets/css 里面, 把 prism.js 文件放到 assets/js 里面, 然后修改主题的 default.hbs 文件, 添加如下:
1
2
3
4
<head>...</head> 内添加
<link rel="stylesheet" type="text/css" href="\{\{asset "css/prism.css"\}\}" />
</body> 标签前添加
<script type="text/javascript" src="\{\{asset "js/prism.js"\}\}"></script>
-=- 完 -=-
参考
本文由作者按照 CC BY 4.0 进行授权