[原创]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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
PHP 中执行系统外部命令
2006/10/09 PHP
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
PHP echo()函数讲解
2019/02/15 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
django ajax发送post请求的两种方法
2020/01/05 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
TCP/IP的分层模型
2013/10/27 面试题
项目副经理岗位职责
2013/12/30 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
室内趣味活动方案
2014/08/24 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年技术员工作总结
2014/11/18 职场文书
英语教师求职信范文
2015/03/20 职场文书
学校运动会感想
2015/08/10 职场文书
《迟到》教学反思
2016/02/24 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers