H5代码高亮加行号

曦暮流年2022-07-112022-07-11

前言

在网页的使用过程中，经常会有代码展示的必要。而不同颜色的关键词，可以让代码看起来更直观、更美观,本文教如何进行代码高亮并显示行号

代码进行高亮

highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，比较实用，而且用起来炒鸡简单！效果如下行所示

1	<p> 这是一行高亮代码</p>

现在来进行操作

本文使用的所有文件都可以在结尾处获取，也可自行下载

步骤一：获取highlight

有两种方法(只用其中一种即可)，不管哪个方法都得去官网,任意一种都管用,网址: https://highlightjs.org

方法一：去官网下载文件使用

点击**获取版本(Get version)**按钮进入语言选择，往下滑，勾选常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了

选好文件之后,往下滑，点击 Download进行下载

styles目录下是所有的css样式，决定代码的颜色

有很多样式，可以参考官方文档: https://highlightjs.org/static/demo

我用的是felipec.min.css

highlight.min.js为库文件，决定代码哪些部分会变高亮

然后引入文件：

1
2
3

<!-- css文件位置可以更改,按照自己文件路径更改即可 -->
<link rel="stylesheet" href="../../gao-liang/styles/felipec.min.css">
<script src="../../gao-liang/highlight.min.js"></script>

方法二：找官网CDN

还是点**获取版本(Get version)**按钮进入，然后第一个就是

把第一个cdnjs里面的内容给链接上

1
2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/felipec.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

这样就大功告成了

步骤二：加载highlight.js库

1
2
3

<script>
    hljs.initHighlightingOnLoad(); //初始化 建议写到head里面
</script>

步骤三：在`<pre>`和`<code>`标签中添加要显示的代码

<pre>
<code class="HTML">
    
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>高亮显示</title>
    </head>
    <body>
        <p>现在所显示的代码是高亮哦</p>
    </body>
    </html>

</code>
</pre>

系统会自动检测你的代码的语言，如果不放心的话，可以在<code>标签中用class属性指定语言类别，上面代码中指定为HTML语言

高亮结束–注意！！！

代码里包含标签，记得将标签里的 <** 换成 **<** ，把 **> 换成 &gt ; 否则会被游览器解析为正常标签，导致显示代码

选择方法二的时候从官方那里复制的cdn的“**//”前面要加上“https:**”，有时候不加这个的话高亮会失灵

要显示的代码有两个语言,只亮了其中一种语言,另一种不亮,这个可以先class决定要亮哪种语言,另一种不亮的可以用注释来使其亮起

比如在HTML页里面写了 script 标签，里面写了内容，输出时，标签亮了，但是标签里面的内容没有亮，这时可以在未亮的代码后面加入语言不同的注释

如HTML的注释是：< !– 注释内容 – >

如CSS的注释是：/* */

如JavaScript的注释是：//

其他语言是否能成功不晓得，但是至少在HTML页面里，script 标签里面的 JS 部分代码就是这样亮的

行号

弄好的高亮里面是没有行号的，所以还要进行行号的配置

下载文件

下载添加行号js文件：https://github.com/wcoder/highlightjs-line-numbers.js

因为是在GitHub上面的，所以有时候会出现进不去的情况，遇到这种情况等待一会就好了

引入文件

1 2	<!-- 具体路径看你把文件放在了哪里 --> <script src="../../gao-liang--hang-hao/highlightjs-line-numbers.js"></script>

加入代码

1
2
3

<script>
    hljs.initLineNumbersOnLoad();//这个不是上面高亮的代码
</script>

添加行号样式

<style>
  .hljs-ln-numbers {
      text-align: center;
      color: #ccc;
      border-right: 1px solid #999;
</style>

完事，ok了，按照高亮部分的格式正常书写就行了

结尾

一共只需要三个文件加四行代码

<!-- 代码高亮 -->
<link rel="stylesheet" href="../../gao-liang--hang-hao/felipec.min.css">
<script src="../../gao-liang--hang-hao/highlight.min.js"></script>
<!-- 行号显示 -->
<script src="../../gao-liang--hang-hao/highlightjs-line-numbers.js"></script>
<!-- 初始化 -->
<script>
    hljs.initHighlightingOnLoad(); //高亮
    hljs.initLineNumbersOnLoad(); //行号
</script>