html优化高亮工具

非常强悍的Javascript代码高亮插件

引言

今天要介绍的是一款在Web开发中的轻量级代码高亮插件——PRISM(中文名:棱镜),它是一个基于现代Web开发语言标准构建的,在很多网站都使用到了它。例如我们熟知的React官网,就用到了它,下面截图就可以看到效果。

非常强悍的Javascript代码高亮插件

react

官网

https://prismjs.com/

下载

官网给我们提供了自定义的下载prism的方式,即我们可以分主题,分支持的语言、分扩展插件、以及分开发版和压缩版,如下图所示:

非常强悍的Javascript代码高亮插件

主题选择

prism提供了几乎所有语言的支持,我们截图大致看一下它支持的语言:

非常强悍的Javascript代码高亮插件

语言支持

非常强悍的Javascript代码高亮插件

语言支持

非常强悍的Javascript代码高亮插件

语言支持

由于官网的排版问题,部分内容可能没有截图完整,下面再看一下它支持的插件

非常强悍的Javascript代码高亮插件

插件支持

我选择的是压缩版,然后勾选上了所有插件和所有支持的语言,prism.js和prism.css合在一起大小是370.62k。实际上我们根本用不了这么多,因此我们在用的时候没有这么大。

基本使用方法

  • 首先我们得在页面引用我们的css和js文件
非常强悍的Javascript代码高亮插件

基本用法

  • 标准的写法我们需要使用pre和code标签,就像下面这样,code的class可以指定显示的语言
<pre>
 <code >p { color: red }</code>
</pre>

显示的效果如下,这是一个最简单的实例

非常强悍的Javascript代码高亮插件

实例

我们来尝试稍微复杂点的,右上角会显示语言和复制,非常的实用,比如我们搭建自己的博客或者记录笔记等场景。

非常强悍的Javascript代码高亮插件

实例

常见语言测试

我这里分别使用JavaScript、Java、C#和Python语言进行了简单的测试,使用的是官网提供的Coy主题,效果如下图,还有太多的语言就不一一测试了。

非常强悍的Javascript代码高亮插件

常见语言

ES6或者其他用法

$ npm install prismjs

import Prism from 'prismjs';

这个地方可能需要Babel-plugin-prmjs插件来管理你的语言等等配置。

在nodejs中使用

var Prism = require('prismjs');
// 你想使用高亮的代码片段
var code = "var data = 1;";
// 返回一个html字符串
var html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

主题预览

我们这里使用React的一段代码进行演示,它是支持JSX代码高亮的

  • 默认的主题样式
非常强悍的Javascript代码高亮插件

默认主题

  • Dark主题样式
非常强悍的Javascript代码高亮插件

Dark主题

  • funky主题样式
非常强悍的Javascript代码高亮插件

funky主题

  • Okaidia主题样式
非常强悍的Javascript代码高亮插件

Okaidia主题

  • Twilight主题样式
非常强悍的Javascript代码高亮插件

Twilight主题

  • coy主题样式
非常强悍的Javascript代码高亮插件

coy主题

  • Solarized Light主题样式
非常强悍的Javascript代码高亮插件

Solarized Light主题

  • Torrow Night主题样式
非常强悍的Javascript代码高亮插件

Torrow Night

总结

Prism支持的语言实在是太多了,我这里就不在一一演示,大家感兴趣的可以自己去研究研究,官网提供了完整的Demo,还支持各种扩展,例如显示行号这样的需求,它都可以实现,代码高亮的插件有不少,大家可以在评论区留下你自己使用的哪一个,每款插件都只是一种选择,选择一个适合自己的或者自己喜欢的就可以了,希望本文对你有所帮助,感谢支持!


本文链接:http://www.cdwelead.comhttp://www.cdwelead.com/jsxw/23075.html
上一篇:怎么做商城小程序(做一个小程序商城要多少钱
下一篇:没有了

欢迎扫描关注我们的微信公众平台!

欢迎扫描关注我们的微信公众平台!