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 ...
随机推荐
- JavaScript系列--浅析原型链与继承
一.前言 继承是面向对象(OOP)语言中的一个最为人津津乐道的概念.许多面对对象(OOP)语言都支持两种继承方式::接口继承 和 实现继承 . 接口继承只继承方法签名,而实现继承则继承实际的方法.由于 ...
- 多线程与MySQL（十）
1.1 多线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...
- getElementsByClassName 方法兼容性封装方法二
var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...
- jq——DOM文档处理
内部插入:父子级关系 1 $(a).append($(b))把b插入到a里面(a里面的面后) $("div").append($("<p>段落</p&g ...
- gcp – 源于CP的高级命令行文件拷贝工具
作者:linux 出处:http://linux.cn/thread/11868/1/1/ gcp – 源于CP的高级命令行文件拷贝工具 几周前,我们讨论了高级拷贝(修改于cp命令,让其可以显示复制进 ...
- 给iview组件select设置默认值
1.首先,给select加一个v-model,如: <Select v-model="exam_name" > <Option v-for="(item ...
- linux日常指令、概念
指令 cal 查看日历date 查看日期bc 计算器ls 查看文件ls -l 查看具体信息(权限,时间等)ls -a 查看所有的文件包括隐藏文件ll 作用同上d* 开头的都是文件夹,- 开头的都是文件 ...
- Linux学习总结（17）——Linux新手必须学会的12个命令
今天的用户可以根据自己的意愿选择是否使用作为Linux象征的命令行,确切的证明了Linux已经有了很大的发展.现在很多Linux发行版的图形用户界面已经非常强大,不再需要命令行. 但是命令行在Linu ...
- POJ2891 Strange Way to Express Integers (扩展欧几里德)
本文为博主原创文章,欢迎转载,请注明出处 www.cnblogs.com/yangyaojia 题目大意 求解一组同余方程 x ≡ r1 (mod a1) x ≡ r2 (mod a2) x ≡ r ...
- 楼宇自控-RS232\RS485\RS422
1.rs-232-c rs-232-c是美国电子工业协会eia(electronic industry association)制定的一种串行物理接口标准.rs是英文"推荐标准"的 ...