如何使用 highlight.js 高亮代码

highlight 是一款简单易用的 web 代码高亮插件，可以自动检测编程语言并高亮，兼容各种框架，可以说是十分强大了。下面就简单介绍一下如何使用这款插件。

两种使用方式：

1. 手动选择主题，官网下载highlight 库文件，并在页面中分别引用 js 和 css 文件。

2. 使用 cdn 链接。

为了简单方便，这里使用第二种方法。

cdn 地址：http://www.bootcdn.cn

highlight cdn: https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js

highlight 高亮主题cdn：http://www.bootcdn.cn/highlight.js/ （具体主题可以在页面中输入关键字搜索）

来，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
  <script >hljs.initHighlightingOnLoad();</script> 
</head>
<body>
  <pre>  
  <code class="javascript">  
     // 这里是需要高亮的代码
      import React, { Component } from 'react'
      class ErrorBoundary extends Component {
        state = {
          error: null,
          errorInfo: null,
        }
        componentDidCatch (error, errorInfo) {
          this.setState({
            error,
            errorInfo,
            hasError: true,
          })
        }
        render() {
          if (this.state.errorInfo) {
            return (
              <details>
                <summary>Something went wrong.</summary>
                <p>{ JSON.stringify(this.state.errorInfo) }</p>
              </details>
            )
          }
          return this.props.children
        }
      }
      export default ErrorBoundary
  </code>  
  </pre> 
</body>
</html>

【分析】

首先在页面中引入 highlight 库文件和想要的主题 css 文件，并在下方添加代码：

<script >hljs.initHighlightingOnLoad();</script>

在需要高亮的代码外部使用 <pre><code> Your code ... </code></pre > 标签包裹，highlight 会自动检测代码语言类型，并执行高亮操作，如果识别失败，可以在code 中手动添加语言类型的类名

<code class="javascript">...</code>

在浏览器中测试效果如下：

尝试手动更换类名修改语言类型为css，刷新页面，查看高亮效果如下：

那么简单的使用方法就是这样了。更多使用方法可以参考官网：

highlight 官网：https://highlightjs.org

How to use Highlight: https://highlightjs.org/usage/

highlight 主题一览：https://highlightjs.org/static/demo/