JS库之Highlight

通过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下载到本地：

保存到本地：

引入本地文件

高亮代码

---

使用highlight.js只需要三步：

1. 使用引入js

2. 引入css

3. 调用调用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>中

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步：

1. 引入js文件

2. 调用initLineNumbersOnLoad( )函数

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

查看效果：

最后

手绘了下图所示的kafka知识大纲流程图（xmind文件不能上传，导出图片展现），但都可提供源文件给每位爱学习的朋友

WRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx5Lyk5oOF54q55Zyo,size_20,color_FFFFFF,t_70,g_se,x_16)

查看效果：

最后

手绘了下图所示的kafka知识大纲流程图（xmind文件不能上传，导出图片展现），但都可提供源文件给每位爱学习的朋友

[外链图片转存中…(img-cfD7aHYH-1714408063464)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录