找到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>
中
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步: