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 ...
随机推荐
- float类型和double类型的二进制存储
在32位环境下, float占用32位,double占用64位, 目前C/C++编译器标准都遵照IEEE制定的浮点数表示法来进行float,double运算.这种结构是一种科学计数法,用符号.指数和 ...
- .NET平台开源JSON序列化
转载: http://blog.csdn.net/ddgweb/article/details/39643747 一个简单示例: String str = "{’name’:’cyf’,’i ...
- Flask-上传文件和访问上传的文件
1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...
- mybatis的sql语句导致索引失效，使得查询超时
mybaitis书写sql需要特别注意where条件中的语句,否则将会导致索引失效,使得查询总是超时.如下语句会出现导致索引失效的情况: with test1 as (select count(C_F ...
- 一个javascript面试题解析
; function fn(){ console.log(this.length); } var obj = { length: , method: function (fn) { fn(); // ...
- 怎样学CSS？
什么是CSS? CSS(Cascading Style Sheet,层叠样式表)是由W3C(万维网联盟)的CSS工作组创建和维护的.它是一种不需要编译,可直接由浏览器执行的标记性语言,用于控制Web页 ...
- HDU 1023 Train Problem II（ 大数卡特兰 ）
链接:传送门 题意:裸卡特兰数,但是必须用大数做 balabala:上交高精度模板题,增加一下熟悉度 /************************************************ ...
- 51nod 1576 Tree and permutation（树的重心+dfn序）
乍一看我不会. 先不考虑加点. 先考虑没有那个除\(2\). 考虑每一条边的贡献,假设某一条边把这棵树分成大小为x,y的两个部分. 那么这条边最多可以被使用\(min(x,y)*2\)次(因为有进有出 ...
- Jquery Map遍历
var map = { 地名: ["北京","天津","上海"], 民族: ["汉族","藏族",& ...
- 【2018 Multi-University Training Contest 2 1007】Naive Operations
[链接] 我是链接,点我呀:) [题意] 给你两个数组a,b; b数组是1..n的一个排列. 现在给你两种操作: add l,r将a[l..r]都加上1 query l,r 询问$∑^r_l\frac ...