用 prism 免插件实现代码高亮
博客一直没有用代码高亮,之前用过代码高亮的插件,但是用着总是不顺心,后来就直接加了个 code 的样式,用自带的 code 标签。
code 标签其实也算是凑合用,因为不能换两行,并且没有缩进。
终于找了个挺不错的代码高亮 js 工具,不用插件,只需要引入一个 css 和 js。
下边有请主角 prismjs
官方地址: prismjs.com
代码精简,而且可以自定义需要高亮的代码,按需定制,这样可以不加载多余的高亮代码。
当前支持110种语言的高亮,6种皮肤,18种插件,均可以自由组合。
如果全部包含的话 Minified version 也只有不到 500K,真的是非常的小巧,不过一般人也就高亮几种,算上 CSS 几十K也就搞定了。
定制方法:
进入下载页进行定制 http://prismjs.com/download.html
- 先选择开发版还是最小版
- 然后是选在你的皮肤,本站用的是Okaidia。
- 之后是选择你需要高亮的语言,按A-Z排序,很容易看花眼。
- 最后是选择你要需要的插件了,比如行号、自动将连接转为地址,显示语言类型、关键词高亮、CSS里边的一些预览等等功能。
完成以上工作后,点击下边的下载 JS 和 CSS 的按钮,或者分别复制保存上边文本框的代码到文件。
使用方法:
引用的页面中,在需要高亮的地方填写
<pre><code class="language-xx">……你的代码段……</code></pre>
其中xx更改为你这段代码的语言就行了。
很好用。
我这就编辑之前的帖子去了!
--- EOF ---