js：highlight.js实现代码的语法高亮-CFANZ编程社区

highlight.js Syntax highlighting for the Web

译文：highlight.js为Web突出显示语法

文档

https://highlightjs.org/

使用方式

1、方式一：cdn

 <link
      rel="stylesheet" 
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"
    />

<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

2、方式二：npm

npm install highlight.js

示例

hljs = require('highlight.js');
html = hljs.highlightAuto('Hello World!').value

使用示例

示例效果

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>prism demo</title>
    <link
      rel="stylesheet"
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"
    />
    
  </head>
  <body>

    <h2>javascript</h2>
    <pre><code class="language-javaScript">let user = {
        "name": "Tom", 
        "age": 18
};

console.log("hello world!");</code></pre>

    <h2>css</h2>
    <pre><code class="language-css">p { color: red }</code></pre>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
  </body>
</html>