代码高亮解决方案
在之前用过Crayon Syntax Highlighter,Enlighter这两个代码高亮的插件.可能是js或其余部分存在冲突,总是导致奇奇怪怪的问题.也找了一些纯js的代码高亮框架.比如: Highlight.js.但最后发现一个高亮框架比较适合: Prism.js.
Prism.js
从我的角度介绍一下Prism.js:
- 核心文件小(约2kb);
- 可以按语言自动加载高亮文件(有条件)
- 代码行号,复制代码等功能作为插件提供
- 可按照插件架构自行扩展
- 多种主题可选
最主要的不会存在升级Wordpress插件导致样式混乱的问题了.同时,在Prism.js的下载页面可以按照自己需要的部分进行下载,最大程度减少文件体积.
综合引用
可以在Prism官网,直接下载一个打包好的JavaScript文件和CSS文件:
参考地址:
打包之后的文件,只需要引入一个CSS和一个JavaScript文件即可.
示例
我目前使用的body下面的第一个div添加的class和data-toolbar-order:
2
</div>
使用方式
- 先引入css
- 然后在pre,code中包含代码,同时为code设置class,class格式为: language-css,language-html,language-java或者lang-java,lang-css,lang-html.更多支持语言的简写,参考这里的Supported languages.
- 最后引入prism.js文件
下面的代码只会显示代码高亮(未引用语言文件的情况下,默认只包含了css,html,js语言的高亮文件):
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>test</title>
<link href="https://cdn.bootcdn.net/ajax/libs/prism/9000.0.1/themes/prism-dark.min.css" rel="stylesheet">
</head>
<body>
<pre><code class="language-css">p { color: red }</code></pre>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/prism/9000.0.1/prism.min.js"></script>
</html>
使用插件
目前我使用了如下插件:
- Line Numbers(显示行号)
- Remove initial line feed(删除初始换行)
- Normalize Whitespace(空白规范)
- Toolbar(工具栏)
- Copy to Clipboard Button(复制按钮)
- Show Language(显示语言)
- Match braces(括号高亮[选中单个括号,另外一个对应的括号同时高亮])
显示行号
引入方式:
css:
JavaScript:
然后在body下面的第一个div设置:
2
3
......内容
</div>
之后直接使用即可:
2
3
4
p { color: red }
</code></pre>
括号高亮
引入:
css:
JavaScript:
参考效果: 官方文档
实现效果:
添加class: match-braces 到body下面的第一个div即可.例如:
2
3
......内容
</div>
如果要显示五颜六色的括号,则继续添加: rainbow-braces,例如:
2
3
......内容
</div>
工具栏
引入:
CSS:
JavaScript:
然后给body设置工具栏要显示的内容:
2
3
......
</div>
show-language,copy-to-clipboard
第一个是显示代码块中的语言,第二个是复制代码.
工具栏可以自定义.具体参考: 工具栏插件文档
显示语言
引入:
复制代码
引入:
即可完成工具栏的效果.