JavaScript语法高亮库highlight.js使用
来源:互联网 发布:app用户数据分析维度 编辑:程序博客网 时间:2024/06/05 19:29
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>
预览效果如下图:
0 0
- JavaScript语法高亮库highlight.js使用
- highlight.js使用例子
- 代码语法高亮插件highlight.js
- [JS] JavaScript语法集锦
- JavaScript基础、语法(JS)
- js---javaScript基本语法
- highlight.js的简单使用方法
- GNU Source-highlight 语法高亮代码
- JS JavaScript基础语法学习
- javascript-第一节-js基础语法
- js---javaScript 1、语法实例
- 在Ghost博客 中使用 highlight.js 实现 代码高亮
- jquery-highlight.js高亮显示
- 代码高亮显示库-highlight.js
- JavaScript 的基础语法 使用
- Vue.js学习之路—模板语法(使用JavaScript表达式)
- Javascript(一)-04-(JS语法-变量)
- javascript 学习一:js语法基础
- Linux引导流程解析(2)
- copy一个比较好的优先队列dijkstra算法模板
- 日志挖掘 log miner
- 奇葩开发问题总结(内存释放)
- 第五章t4
- JavaScript语法高亮库highlight.js使用
- IOS调试错误:Unable to run app in Simulator
- Java程序数据库连接,数据源配置,数据库连接池
- 怎么使用focus插件制作动态图册
- HTML5视频及其兼容实践
- IOS初级:UIwindow
- poj3660 Cow Contest(Floyd-Warshall方法求有向图的传递闭包)
- 华为OJ之初级篇Ⅱ
- mark-fragment中获取控件的时机