[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】


Posted in Javascript onNovember 01, 2016

本文实例讲述了JavaScript语法高亮库highlight.js用法。分享给大家供大家参考,具体如下:

highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用。

这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用。

1.获取highlight.js库,用户可以从官网获取:

地址:https://highlightjs.org/download/

[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】

highlight.js库支持在线定制,按照默认的选择点击Download即可:

[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】

或者点击此处本站下载

2.下载后解压,文件结构如下:

[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】

styles目录下为所有css样式,highlight.pack.js为库文件。

3.在html页面中引入default.css和highlight.pack.js,代码如下:

<link rel="stylesheet" href="highlight/styles/default.css">
<script src="highlight/highlight.pack.js"></script>

4.加载highlight.js库,代码如下:

<script>
 hljs.initHighlightingOnLoad();
</script>

5.在<pre>和<code>标签中添加要高亮显示的代码:

<pre>
<code class="php">
<?php
//使用substr_replace函数进行字符串插入操作demo
$str="欢迎来到三水点靠木";
echo substr_replace($str,"\"PHP大神\"",4,0);
//输出:欢迎"PHP大神"来到三水点靠木
?>
</code>
</pre>

class属性指定语言类别,上面代码中指定为php语言。

完整代码如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>HighLightjs</title>
 <link rel="stylesheet" href="highlight/styles/default.css">
 <script src="highlight/highlight.pack.js"></script>
<body>
<script>
 hljs.initHighlightingOnLoad();
</script>
<pre>
<code class="php">
<?php
//使用substr_replace函数进行字符串插入操作demo
$str="欢迎来到三水点靠木";
echo substr_replace($str,"\"PHP大神\"",4,0);
//输出:欢迎"PHP大神"来到三水点靠木
?>
</code>
</pre>
</body>
</html>

预览效果如下图:

[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript中注册和移除事件的4种方式
Mar 20 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 #Javascript
Vue.js组件使用开发实例教程
Nov 01 #Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 #Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 #Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 #Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 #Javascript
js print打印网页指定区域内容的简单实例
Nov 01 #Javascript
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript静态的url如何传递
2007/05/03 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
Android分包MultiDex策略详解
2017/10/30 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
详解django自定义中间件处理
2018/11/21 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python英语单词测试小程序代码实例
2019/09/09 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
opencv 阈值分割的具体使用
2020/07/08 Python
自我鉴定模板
2013/10/29 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
优秀教师工作感言
2014/02/16 职场文书
降消项目实施方案
2014/03/30 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
Python快速实现一键抠图功能的全过程
2021/06/29 Python