php prism,漂亮的代码语法高亮库:Prism.js

本文介绍了如何在网页中使用Prism.js进行代码高亮,包括引入CSS和JS文件、使用code元素、设置文档范围语言、自定义下载语言包、行号插件及NPM安装。Prism.js提供多种语言支持,且易于扩展和定制。
摘要由CSDN通过智能技术生成

如何使用

我们只需要在页面上引入 prism.css 和 prism.js 文件:

...

...

根据HTML5规范,代码标记需要使用元素,使用Prism时,可以给code元素添加language-xxx类。如果多个元素具有相同的语言,则可以在其共同的父元素 上添加language-xxx类。这样,您还可以通过在或元素上添加language-xxx类来定义文档范围的默认语言。

Prism推荐使用内部语义化的pre 元素和 code 元素来标记代码区块,如下所示:

p { color: red }

如果你的代码块是其他语言,你可以把language-xxx类中的xxx改成设定的语言,如:html,javascript,php等。

Prism.js支持很多种语言和插件主题。把一些不必要支持的语言包下载下来,会加大库文件大小,拖累我们网站加载速度。所以Prism.js采用自定义下载。在下载页面定,勾选你所需要高亮的语言、主题和插件,然后点击下载即可。下载地址:http://prismjs.com/download.html

你可以使用插件来给代码添加行号,只需要在pre标签中加上line-numbers类即可。在之前的js代码中添加一行。

当然,我们也可以使用NPM来安装Prismjs:

$ npm install prismjs

这样使用:

var Prism = require('prismjs');

// The code snippet you want to highlight, as a string

var code = "var data = 1;";

// Returns a highlighted HTML string

var html = Prism.highlight(code, Prism.languages.javascript);

Prism.js主要功能列表

极致易用,引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!

压缩后只有2KB的大小(核心)。每种语言定义增加了大约300-500字节。

语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。

如果可能,支持通过 Web Workers 实现并行。

由于Prism的插件架构,非常容易扩展而无需修改代码。

突出显示特定的行和/或行范围(需要插件)

显示不可见的字符,如制表符,换行符等(需要插件)

自动链接URL和电子邮件,在评论中使用Markdown链接(需要插件)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值