JS库之Highlight.js高亮代码

花伤情犹在

已于 2022-02-10 20:09:32 修改

阅读量4.3k

点赞数 6

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript html

于 2021-10-28 15:02:00 首次发布

By-花伤情犹在

本文链接：https://blog.csdn.net/qq_31762741/article/details/121012496

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

Highlight.js介绍

官网
在这里插入图片描述
下载地址：https://highlightjs.org/download/

highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。具有以下特色：

支持 92 种语言，49 种代码格式化风格。
自动检测语言种类
支持多语言混合的代码高亮
支持Node.js
支持使用任何HTML标记
兼容任意js框架

引入 highlight.js 文件

我们需要在页面中同时引入一个 js 文件和一个 css 文件。

这里我推荐这里直接使用BootCDN提供的 CDN 链接，既简单又提升加载速度，收录多达4k+的前端开源项目：
在这里插入图片描述
搜索highlight

可以看到各个版本的js与ccs链接：

找到highlight.js，点击复制 <script> 标签

通过CDN引入highlight-js：

接下来引入主题：

由于主题有很多种风格，这里随便选一种风格

按住Ctrl+F搜索styles:
在这里插入图片描述
点击复制<link>标签

通过CDN引入highlight-css：

当然你也可以将js文件和css文件下载到本地，进行本地引入：

#js
https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js
#css
https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/a11y-dark.min.css

通过链接将js和css下载到本地：
在这里插入图片描述
保存到本地：

引入本地文件

<script src="本地路径"></script>
<link href="本地路径">

高亮代码

使用highlight.js只需要2步：

引入js和css
调用initHighlightingOnLoad函数

默认高亮<pre><code></code></pre>块包裹的代码,initHighlightingOnLoad是在页面加载时执行。

添加需要显示的内容

这里需要把要显示的内容放入到<code>中

<pre><code>这里放内容...</code></pre>

默认的话会智能识别，若是识别不出来是什么语言，就需要在<code>标签中加入class，值为你所使用的语言，例如你要高亮的代码是java，class=“java”

<pre><code class="java" >xxx</code></pre>

示例Java：

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

将代码放入<code>中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>highlight高亮代码</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/a11y-dark.min.css" rel="stylesheet">
	<script>hljs.initHighlightingOnLoad();</script> 
</head>
<body>
<pre>
<code>
public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello World");
    }
}
</code>
</pre>
</body>
</html>

查看效果：
在这里插入图片描述

代码加上行号

highlight没有行号支持，需要引入Highlight.js 行号插件才可以实现行号。

项目地址：https://github.com/wcoder/highlightjs-line-numbers.js/

给代码加上行号只需要2步：

引入js文件
调用initLineNumbersOnLoad( )函数

引入CDN行号插件，然后调用initLineNumbersOnLoad( )函数

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

在这里插入图片描述
查看效果：

显然效果不太好看，我们需要自定义css样式：

<style>
		/*代码字体*/
		pre code{    
		  font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
		}

    	.hljs {
    		padding: 0;
    	}
    	.hljs-ln td {
		    padding: 2px 10px;
		}
		/* 行号块 */
		td.hljs-ln-numbers {
		    text-align: center;
		    color: #2F7689;
		    background-color: #202020;
		    /*border-right: 0.5px solid #CCC;*/
		    vertical-align: top;
		}
		/* 代码块 */
		td.hljs-ln-code {
		    padding-left: 5px;
		}

</style>

效果：
在这里插入图片描述

花伤情犹在

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
5
评论
JS库之Highlight.js高亮代码

Highlight.js介绍官网下载地址：https://highlightjs.org/download/highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。具有以下特色：支持 92 种语言，49 种代码格式化风格。自动检测语言种类支持多语言混合的代码高亮支持Node.js支持使用任何HTML标记兼容任意js框架引入 highlight.js 文件我们需要在页面中同时引入一个 js 文件和一个
复制链接

扫一扫