本文演示了JavaScript语法高亮库highlight.js的用法,与大家分享一下,供大家参考,如下所示:
Highlight.js是一个基于JavaScript的语法高亮库,目前支持125种编程语言和63种风格可供选择,可以自动识别语言。它兼容当前主流的JS框架,可以混合使用。
这个亮点库可以在博客系统中使用,使用方法非常简单,几乎没有任何学习成本。highlight.js的使用介绍如下。
1.获取highlight.js库,可从官网获取:
地址:https://highlightjs.org/download/
highlight.js库支持在线定制。默认情况下,单击下载:
或者点击这里下载。
2.下载后解压。文件结构如下:
样式目录中有所有的css样式,highlight.pack.js是库文件。
3.在html页面中引入default.css和highlight.pack.js,代码如下:
Linkrel='样式表' href=' highlight/style/default . CSS '脚本src=' http : highlight/highlight . pack . js '/script 4。用以下代码加载highlight.js库:
脚本hljs . inithighlingnload();/script5。添加要在pre和code标签中突出显示的代码:
precode class='php '?Php//使用substr_replace函数插入字符串demo$str='欢迎使用我们';Echo substr_replace($str,'PHP god ' ',4,0);//输出:欢迎PHP神’加入我们?/code/preclass属性指定语言类别,在上面的代码中被指定为php语言。
完整的代码如下:
!DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title highlight js/title link rel='样式表' href=' highlight/styles/default . CSS ' script src=' http : highlight/highlight . pack . js '/scriptbodyscript hljs . inithighlight ingnload();/scriptprecode class='php '?Php//使用substr_replace函数插入字符串demo$str='欢迎使用我们';Echo substr_replace($str,'PHP god ' ',4,0);//输出:欢迎PHP神’加入我们?/code/pre/body/html的预览效果如下:
更多对JavaScript相关内容感兴趣的读者可以查看本网站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》和0103010
希望本文对JavaScript编程有所帮助。