[原创]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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
微信JS接口大全
Aug 25 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
关于JavaScript轮播图的实现
Nov 20 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 和 MySQL 基础教程(三)
2006/10/09 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
javascript中的this详解
2014/12/08 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
JS实现分页导航效果
2020/02/19 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
python写入xml文件的方法
2015/05/08 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
np.random.seed() 的使用详解
2020/01/14 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
高级工程师岗位职责
2013/12/15 职场文书
高中体育教学反思
2014/01/29 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2015年元旦标语大全
2014/12/09 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
导游词之桂林山水
2019/09/20 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
Python基本数据类型之字符串str
2021/07/21 Python