JS库之Highlight，Java400道面试题通关宝典助你进大厂

本文链接：https://blog.youkuaiyun.com/m0_63174529/article/details/121246776

在这里插入图片描述

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

在这里插入图片描述

通过CDN引入highlight-js：

在这里插入图片描述

接下来引入主题：

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

按住Ctrl+F搜索styles:

在这里插入图片描述

点击复制<link>标签

在这里插入图片描述

通过CDN引入highlight-css：

![在这里插入图片描述](https://img-blog.csdnimg.cn/7a1bc62ad4834cd39

【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】

浏览器打开：qq.cn.hn/FTf 免费领取

29e4f16cd15c8c7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx5Lyk5oOF54q55Zyo,size_20,color_FFFFFF,t_70,g_se,x_16)

当然你也可以将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下载到本地：

在这里插入图片描述

保存到本地：

在这里插入图片描述

引入本地文件

高亮代码

使用highlight.js只需要三步：

使用引入js
引入css
调用调用initHighlightingOnLoad函数

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

添加需要显示的内容

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

这里放内容...

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

xxx

示例Java：

public class HelloWorld {

public static void main(String[] args) {

System.out.println(“Hello World”);

}

将代码放入<code>中

highlight高亮代码



public class HelloWorld {

public static void main(String[] args) {

System.out.println("Hello World");

}

}

查看效果：

在这里插入图片描述

代码加上行号

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

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

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