[原创]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 相关文章推荐
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
javascript canvas封装动态时钟
Sep 30 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
3.从实例开始
2006/10/09 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
python装饰器decorator介绍
2014/11/21 Python
python cs架构实现简单文件传输
2020/03/20 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
心理健康教育制度
2014/01/27 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
维修工先进事迹
2014/05/29 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
圣诞晚会主持词
2015/07/01 职场文书
早上好问候语大全
2015/11/10 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书