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 ...
随机推荐
- Linux中文件上传使用rz
1.首先,要是服务器不支持rz命令的话,需要安装执行 sudo yum -y install lrzsz 2.再输入rz -be命令,选择需要上传的本地文件 sudo rz 从服务端发送文件到客户端: ...
- crawler4j详细配置
控制器类必须传一个类型为CrawlConfig的参数,用于配置crawler4j.下面描述了一些关于配置的细节. 抓取深度 默认情况下没有抓取深度的限制.可以通过配置来限制深度,比如,你有个种子页面A ...
- SQL语句之WITH AS
一．WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到. 其实就是把一大堆 ...
- C#将内容导出到Word到指定模板
昨天做了下导入导出Excel文件,今天研究了下导出Word文件. 从网上找了半天才找到了一个能导出到指定模板的,在这里总结下. 导出模板原理就是利用的替换占位符. 我这里先建立好了一个模板, 接下来写 ...
- vue-cli安装步骤
vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 条件: node在4.以上,npm在3以上 安装 指令: 1.npm install -g vue-cli 在全 ...
- Hybrid混合开发中schema协议的使用与封装
混合开发中JS与APP通信的实现原理: JS通过schema协议,传递参数和全局回调函数给APP端 APP执行完(如微信扫一扫)后,调用协议中传入的回调函数,在前端执行回调处理. 默认写法: < ...
- 新手配置vux
1.首先跟平常一样创建一个vue的项目 2.开始配置vux 第一步 安装vux npm install vux --save 第二步 安装vux-loader npm install vux-loa ...
- ATL and MFC String Conversion Macros
ATL 7.0介绍了一些新的转换类和宏,为现有的宏提供了重要的改进.新的字符串转换类和名称宏的形式是:C 源类型 2[C] 目标类型[EX]其中:•源类型和目标类型描述如下表.• [C]是目标类型必须 ...
- MySQL构造测试数据
构造测试数据(笛卡尔积,6 次100 万) create table t1(id int, val varchar(80)); set @i := 0;create table tmp as sele ...
- Unity 设置2台摄像机的叠加
如果Camera1和Camera2拍摄的物体各自在摄像机视野内,如果在同一个屏幕上把2件物体都显示出来? 1,Camera1的Depth设置为-1 2,Camera2的Depth设置为0,同时Clea ...