如何使用 highlight.js 高亮代碼

時間 2019-11-19

標籤如何使用 highlight.js highlight 代碼欄目 JavaScript 简体版

原文原文鏈接

highlight 是一款簡單易用的 web 代碼高亮插件，能夠自動檢測編程語言並高亮，兼容各類框架，能夠說是十分強大了。下面就簡單介紹一下如何使用這款插件。javascript

兩種使用方式：css

1. 手動選擇主題，官網下載highlight 庫文件，並在頁面中分別引用 js 和 css 文件。html

2. 使用 cdn 連接。java

爲了簡單方便，這裏使用第二種方法。react

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

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/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。