html高亮用js写,利用Prism.js脚本工具实现网页代码高亮效果

如果我们是站长相关的网站博客,如果需要引用一些脚本代码的时候一般看到的都是代码高亮效果,这样的用户体验更好一些。我们要实现代码高亮的方法有很多中,比如WordPress也有代码高亮插件或者是手动实现CSS样式来实现代码高亮。在这篇文章中老蒋要分享的是Prism.js小工具可以实现页面的代码高亮效果。

Prism.js,是一款轻量的可以定制的代码插件效果工具。我们可以使用Prismjs 可以快速为网站添加代码高亮功能。Prism.js 脚本可以自定义下载,支持超过 100 多种编程语言,还支持很多种插件,这个就不仅仅局限适合哪个CMS,所有的网站页面都可以使用只要我们引用对应的JS文件。

第一、PrismJS高亮代码下载

下载地址:https://prismjs.com/download.html

1c6c28fc48c4bbadf2a8e0a3abc75c99.png

PrismJS目前支持8种主题样式,我们选择 Themes,Languages,Plugins,点击底部的下载按钮,会得到 prism.css 和 prism.js两个文件。

第二、引用PrismJS文件

...

...

这个根据我们网站的目录路径然后实际将两个文件丢到我们网站目录中 引用。

第三、如何使用

案例效果:https://prismjs.com/examples.html

ba84491a3afb68b81d05e8ca3cb09ff9.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值