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 ...
随机推荐
- 两个TableView产生联动的一中方法
如何使用两个TableView产生联动:将两个tableView的滚动事件禁止掉,最外层scrollView滚动时将两个TableView跟着滚动,并且更改contentOffset,这样产生效果滚动 ...
- 淘宝druid报错：javax.management.InstanceNotFoundException: com.alibaba.druid:type=DruidDataSourceStat
问题: 启动tomcat报错: Tomat报出一下异常:ERROR [com.alibaba.druid.stat.DruidDataSourceStatManager] – unregister m ...
- 整理windows相关软件的环境变量
java: JAVA_HOME [安装java的home目录] PATH [在最后添加] ;%JAVA_HOME%\bin; CLASSPATH [文本框的起始位 ...
- infludb语法--官网
https://docs.influxdata.com/influxdb/v0.8/api/query_language/ InfluxDB features a SQL like query lan ...
- Unity 获取坐标函数 坐标转换函数
获取世界坐标:transform.position 获取本地坐标:transform.localPosition 获取鼠标坐标:Input.mousePosition 获取手指触摸区域坐标:Input ...
- ZBrush破解版真的好用么？
安装ZBrush®的时候是不是经常出现各种奇葩问题,使用ZBrush时候是不是经常出现停止工作状况,究其原因,原来都是破解搞的鬼.ZBrush破解版你还敢用么? 随着国人对版权的重视,越来越多的制作商 ...
- ZBrush通过显示与隐藏得到子物体
在ZBrush®中得到子物体的方法有很多,本文将为大家介绍一种新的创建子物体的方法,通过显示和隐藏得到子物. ZBrush 4R8中文版下载:http://wm.makeding.com/iclk/? ...
- 21_HTML&CSS
今日内容: 1. HTML标签:表单标签2. CSS: HTML标签:表单标签 * 表单: * 概念:用于采集用户输入的数据的.用于和服务器进行交互. * form:用于定义表单的.可以定义一个范围 ...
- （2016北京集训十三）【xsy1531】魔法游戏 - Nim游戏
题解: 好题!我的结论很接近正解了... 把一个数化成二进制,每次至少要拿走一位,最多全拿走,不能不拿.那么这就是一个经典的Nim问题了,子树异或起来就是根节点的答案,随便递推一下就行了. 代码: # ...
- CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...
对于text-overflow:ellipsis,文本超出部分显示...,但要实现这个效果,却有一些必备条件,如下: div{ overflow:hidden; white-space:nowrap; ...