JS库之Highlight.js高亮代码

x33g5p2x  于2021-10-28 转载在 其他  
字(2.7k)|赞(0)|评价(0)|浏览(469)

Highlight.js介绍

官网

下载地址:https://highlightjs.org/download/

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

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

|

|

|
| ------------ | ------------ |
|

|

|
| | |
|

|

|

引入 highlight.js 文件

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

这里我推荐这里直接使用BootCDN提供的 CDN 链接,既简单又提升加载速度,收录多达4k+的前端开源项目:

搜索highlight

可以看到各个版本的jsccs链接:

找到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只需要三步:

  1. 使用引入js
  2. 引入css
  3. 调用调用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步:

  1. 引入js文件
  2. 调用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>

效果:

相关文章