JavaScript语法高亮库highlight.js使用
2015-06-01 22:15
561 查看
highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用。
这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用。
1.获取highlight.js库,用户可以从官网获取:
地址:https://highlightjs.org/download/
highlight.js库支持在线定制,按照默认的选择点击Download即可。
![](http://img.blog.csdn.net/20150601232126808)
2.下载后解压,文件结构如下:
![](http://img.blog.csdn.net/20150601232303092)
styles目录下为所有css样式,highlight.pack.js为库文件。
3.在html页面中引入default.css和highlight.pack.js,代码如下:
4.加载highlight.js库,代码如下:
5.在
class属性指定语言类别,上面代码中指定为java语言。
完整代码如下所示:
预览效果如下图:
这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍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使用
- JavaScript语法高亮库highlight.js使用
- JSP内置对象
- JavaScript 对象
- js for循环中的闭包
- arguments | json | currentStyle
- JavaScript HTML DOM 元素(节点)
- js的闭包概念
- JavaScript HTML DOM EventListener
- JS 脚本放在不同位置的差异
- JavaScript前端框架的思考
- 生成二维码,使用JS技术
- 《javascript高级程序设计》 touch事件的一个小错误
- Introduction to JavaScript
- Jsp初探2015-06-01
- JavaScript-- 表单验证、 E-mail 验证
- JavaScript--JavaScript 错误 - Throw、Try 和 Catch
- JavaScript-break 语句用于跳出循环
- json处理——Jackson框架
- JS Complementary DNA & Monotone travel & Showing X to Y of Z Products.