JavaScript语法高亮库highlight.js使用
highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，可以混合使用。
这款高亮库可以用在博客系统中，其使用方法及其简单，几乎不需要任何学习成本，下面介绍highlight.js的使用。
1.获取highlight.js库，用户可以从官网获取：
地址：https://highlightjs.org/download/
highlight.js库支持在线定制，按照默认的选择点击Download即可。
2.下载后解压，文件结构如下：
styles目录下为所有css样式，highlight.pack.js为库文件。
3.在html页面中引入default.css和highlight.pack.js，代码如下：
<link rel="stylesheet" href="../styles/default.css">
<script src="../highlight.pack.js"></script>4.加载highlight.js库，代码如下：
<script>
hljs.initHighlightingOnLoad();
</script>5.在<pre>和<code>标签中添加要高亮显示的代码：
<pre>
<code class="java">
public class HelloWorld {
/**
* 输出一行字符串“Hello World!”
* @param args
*/
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</code>
</pre>class属性指定语言类别，上面代码中指定为java语言。
完整代码如下所示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HighLightjs</title>
<link rel="stylesheet" href="../styles/default.css">
<script src="../highlight.pack.js"></script>
<body>
<script>
hljs.initHighlightingOnLoad();
</script>
<pre>
<code class="java">
public class HelloWorld {
/**
* 输出一行字符串“Hello World!”
* @param args
*/
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</code>
</pre>
</body>
</html>预览效果如下图：
JavaScript语法高亮库highlight.js使用的更多相关文章
- VS2015 企业版不支持 JavaScript 语法高亮、智能提醒
2015年7月,微软终于放出了 Visual Studio 2015 正式版,博主安装了 Visual Studio 2015 企业版之后,居然不支持 JavaScript 的语法高亮.智能提醒功能, ...
- JavaScript语法详解：JS简介&变量
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. JavaScript简介 Web前端有三层: HTML:从语义的角度,描 ...
- javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
- 简单的JavaScript图像延迟加载库Echo.js
插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQu ...
- 简单的Javascript图片延迟加载库Echo.js
简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...
- 测试Swift语言代码高亮-使用highlight.js
func &( left:OCBool, right: OCBool)->OCBool{ if left{ return right } else{ return false } }
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
- [转]7个高性能JavaScript代码高亮插件
对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...
- 代码语法高亮踩坑-原理，问题, PRE元素及htmlentity
语法高亮库基础原理 在研究使用能够在web页面上代码语法高显的解决方案时,发现有很多现成的开源库.比较中意的有prism.js,highlightjs.他们的原理基本上核心就两点: 1. 利用html ...
随机推荐
- Excel—— [导入到数据库] or 将数据 [导入到Excel]
将Excel导入到数据库实现如下: 前台代码: @model IEnumerable<Model.Student> @{ Layout = null; } <!DOCTYPE htm ...
- MEF example code
public interface IObjectResolver { } public class ObjectResolver:IObjectResolver { private Compositi ...
- js从数组中取出n个不重复的数据
/** * 首先,针对这个数组做一个去重处理,避免你在后面取数据的时候,因为取到相同的元素而又要多去取一次随机数 * 将获取到的不重复的数组,再到这里样本里面去取随机数 * 每取到一次,就将这个元素从 ...
- 有关windows dpi适配(c#)
/// <summary>当前Dpi</summary> public static Int32 Dpi { get; set; } /// <summary>修正 ...
- 代码行数统计(mac)
如何统计自己的代码量?下面介绍两个方法: 一.cloc 1.首先,安装homebrew,已安装的请跳过. 打开终端工具Terminal,输入下列命令.过程中会让你按RETURN键以及输入mac桌面密码 ...
- 产品开发也要看阵容，APP开发只需五步变得靠谱
最早认识的一个朋友是程序员,曾经到一家外包公司接单子,小外包公司经常遇到的问题就是和需求方谈产品功能.客户要做外包,对方让他一次性报价,但是客户连功能点自己都不清楚,这时朋友说还是按照具体功能点来做吧 ...
- C语言基本语法——变量
1.变量作用域 2.局部变量 3.全局变量 4.变量生命周期 5.auto关键字 6.static关键字 1.变量作用域 • 变量作用域是指变量的有效范围 • 变量作用域是定义变量从何处被创建,到何处 ...
- [BOI2011]MET-Meteors
题目:洛谷P3527. 题目大意:n个国家在某星球上建立了m个空间站(一个空间站只属于一个国家),空间站围成一个环.现在知道要下k天陨石,每天都在一个区间内下,每个点都下同样多的(若r>l,则说 ...
- CF449D Jzzhu and Numbers (状压DP+容斥)
题目大意: 给出一个长度为n的序列,构造出一个序列使得它们的位与和为0,求方案数 也就是从序列里面选出一个非空子集使这些数按位与起来为0. 看了好久才明白题解在干嘛,我们先要表示出两两组合位与和为0的 ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...