漂亮的代码语法高亮插件Prism.js简单使用文档

网页代码高亮插件真的是非常多。例如:SyntaxHighlighter ,Google Code Prettify,Highlight.js等等。

今天介绍一个漂亮而且小巧的JS插件:Prism.js

官网地址:http://prismjs.com/index.html

为什么选用Prism.js?

除了简单,小巧之外,还有以下优点

  • 极致易用:引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!
  • 天生伶俐:语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。
  • 轻如鸿毛:代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。
  • 快如闪电:如果可能,支持通过 Web Workers 实现并行。
  • 轻松扩展:定义新语言或扩展现有语法,或者新增功能都非常简单。
  • 丰富样式:所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。

谁在使用

我们截取一些官方公布的使用者,这里不乏一些十分大的网站。

其他主题

Prism.js除了默认主题,另外其还支持很多种主题。Examples

Dark:

Funky

Okdiaia

Twilight

Coy

Solarized light

下载

Prism.js支持很多种语言和插件主题。把一些不必要支持的语言包下载下来,会加大库文件大小,拖累我们网站加载速度。所以Prism.js采用自定义下载。

从这里可以看出Prism.js支持的配置项还是非常多的。我们勾选上我们需要的选项,点击最下方的下载css和js下载文件。

提示: 除了选择语言,在最下方的Plugins选项中,有一个Line Numbers还是非常值得下载的,可以在代码前显示行号。

使用

使用非常简单,首先进入相应的主题目录下上传所下载的 prism.css 和 prism.js 文件。

链入css及js文件方法①:将下面的代码复制到 funcations.php 中。

推荐阅读

admin

大家好!欢迎光临我的个人博客,本博主要是学习和记录自己生活、学习中发生的点点滴滴的过程,很高兴可以把自己的废话和一点点的经验拿出来和网友分享,最大的愿望就是能构共同学习,共同进步。

1 Response

  1. DITST说道:

    怎么不更新了?

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据