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. View的呈现（二）加载流程

    这块涉及到Code+Razor模板=>html[output流] 而这块的问题在于Razor最后生成了什么?--对象:一个类文件:eg:index.cshtml  => index_cst ...

  2. 基于 Web 的 Go 语言 IDE - Wide 1.3.0 发布！

    http://symphony.b3log.org/article/1437292757551 欢迎各位提意见.建议,参与到 Wide 开源项目中 :-)

  3. Android 多线程下载 显示进度 速度

    功能要求:从网络下载一APK应用,显示下载速度.进度,并安装应用. 运行效果图: 工程结构图: 很简单,就一个activity,一个更新UI的线程,一个下载线程加个文件处理类 主要代码: /** *多 ...

  4. Sql Server远程还原

    1.假设备份文件xxxx.bak大小约300G,还原后所占用的空间为900G 2.磁盘空间只有1T,若将备份文件拷贝过来,空间剩余700G,无法成功还原,因此通过远程方式还原. 例子如下: SQLSE ...

  5. Dynamic dispatch mechanisms

    Normally, in a typed language, the dispatch mechanism will be performed based on the type of the arg ...

  6. CSS——背景图像区域

    background-clip属性 background-clip属性指定背景绘制区域 语法 background-clip:border-box|padding-box|content-box; b ...

  7. CSS布局总结（三）

    前言:今天学的有点少,主要是有点迷.... 这是昨天没写的 一.水平居中 .parent{ text-aglin:center; } .child{ display:inline-block; } . ...

  8. Django REST Framework 认证 - 权限 - 限制

    一. 认证 (你是谁?) REST framework 提供了一些开箱即用的身份验证方案,并且还允许你实现自定义方案. 自定义Token认证 第一步 : 建表>>>> 定义一个 ...

  9. java中new一个对象的执行过程及类的加载顺序

    1,new一个对象时代码的执行顺序 (1)加载父类(以下序号相同,表明初始化是按代码从上到下的顺序来的) 1.为父类的静态属性分配空间并赋于初值 1.执行父类静态初始化块; (2)加载子类 2.为子类 ...

  10. Hbase读取数据

    get命令和HTable类的get()方法用于从HBase表中读取数据.使用 get 命令,可以同时获取一行数据.它的语法如下: get ’<table name>’,’row1’ 下面的 ...