用 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 ---

留下评论

电子邮件地址不会被公开。 必填项已用*标注

冀ICP备17005573号-1