JS库之Highlight.js高亮代码
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只需要三步：
- 使用引入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>效果：
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq_31762741/article/details/121012496
内容来源于网络，如有侵权，请联系作者删除！