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使用的更多相关文章

  1. VS2015 企业版不支持 JavaScript 语法高亮、智能提醒

    2015年7月,微软终于放出了 Visual Studio 2015 正式版,博主安装了 Visual Studio 2015 企业版之后,居然不支持 JavaScript 的语法高亮.智能提醒功能, ...

  2. JavaScript语法详解：JS简介&变量

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. JavaScript简介 Web前端有三层: HTML:从语义的角度,描 ...

  3. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...

  4. 简单的JavaScript图像延迟加载库Echo.js

    插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQu ...

  5. 简单的Javascript图片延迟加载库Echo.js

    简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...

  6. 测试Swift语言代码高亮-使用highlight.js

    func &( left:OCBool, right: OCBool)->OCBool{ if left{ return right } else{ return false } }

  7. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  8. [转]7个高性能JavaScript代码高亮插件

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...

  9. 代码语法高亮踩坑-原理，问题, PRE元素及htmlentity

    语法高亮库基础原理 在研究使用能够在web页面上代码语法高显的解决方案时,发现有很多现成的开源库.比较中意的有prism.js,highlightjs.他们的原理基本上核心就两点: 1. 利用html ...

随机推荐

  1. 个人作业—Alpha项目测试

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...

  2. T7315 yyy矩阵折叠(长)

    题目背景 全场基本暴零 题目描述 输入输出格式 输入格式: 如图 输出格式: 如图 输入输出样例 输入样例#1: 2 2 1 -2 3 -4 输出样例#1: 4 输入样例#2: 2 5 1 -2 -3 ...

  3. js获取浏览器中相关容器的高度

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...

  4. 一个基于React整套技术栈+Node.js的前端页面制作工具

    pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...

  5. android夜间模式切换

    1.记录个最简单的夜间模式的实现 2.styles.xml <style name="DayTheme" parent="AppTheme"> &l ...

  6. RecyclerView的刷新和加载更多

    1.RecyclerView :出现也不知道多久了,没怎么使用过,上次写的笔记乱七八糟的,再次仔细的整理下.   使用需加入依赖  compile 'com.android.support:recyc ...

  7. CF992E Nastya and King-Shamans_线段树

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 200000 ...

  8. gcp – 源于CP的高级命令行文件拷贝工具

    作者:linux 出处:http://linux.cn/thread/11868/1/1/ gcp – 源于CP的高级命令行文件拷贝工具 几周前,我们讨论了高级拷贝(修改于cp命令,让其可以显示复制进 ...

  9. WePy--使用zanUI组件

    因为Wepy 中不能直接引入zanUI组件, 好在还有百度, 参考链接 https://github.com/brucx/wepy-zanui-demo (感谢); 我的做法是将 源码下了下来, 源码 ...

  10. 四、分布式 Git（未完待续）

    一.分布式工作流程 在 Git 中,每个开发者同时扮演着节点和集线器的角色——也就是说,每个开发者既可以将自己的代码贡献到其他的仓库中,同时也能维护自己的公开仓库,让其他人可以在其基础上工作并贡献代码 ...