当前位置：首页 > 行业动态 > 正文

如何在CSDN上实现JavaScript代码高亮显示？

admin
行业动态
2025-01-24
2361

### ，，在CSDN上，代码高亮JS主要通过引入Highlight.js库来实现。首先在HTML文件中引入其CSS和JavaScript文件，然后在` 标签中编写代码并指定语言类型，最后调用hljs.highlightAll()`方法初始化高亮显示。

在CSDN上实现代码高亮显示，通常可以通过引入JavaScript库如Highlight.js或Prism.js来完成，以下是使用这两种库的详细步骤及示例：

如何在CSDN上实现JavaScript代码高亮显示？第1张

使用Highlight.js实现代码高亮

1、引入Highlight.js：需要在HTML文件中引入Highlight.js的CSS和JavaScript文件，可以通过CDN方式引入。

2、编写HTML代码块：在HTML中编写需要高亮的JS代码块，并在<pre><code>标签中添加。

3、初始化Highlight.js：在页面加载完成后，调用hljs.highlightAll()方法来初始化Highlight.js。

完整示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Code Highlight</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
</head>
<body>
    <pre><code >
        // Example JavaScript code
        function sayHello() {
            console.log("Hello, World!");
        }
        sayHello();
    </code></pre>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", (event) => {
            hljs.highlightAll();
        });
    </script>
</body>
</html>

使用Prism.js实现代码高亮

1、引入Prism.js：与Highlight.js类似，需要引入Prism.js的CSS和JavaScript文件，同样可以通过CDN方式引入。

2、编写HTML代码块：在HTML中编写需要高亮的JS代码块，并在<pre><code>标签中添加。

3、初始化Prism.js：在页面加载完成后，调用Prism.highlightAll()方法来初始化Prism.js（注意：Prism.js的初始化方法与Highlight.js不同）。

完整示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Code Highlight</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css">
</head>
<body>
    <pre><code >
        // Example JavaScript code
        function sayHello() {
            console.log("Hello, World!");
        }
        sayHello();
    </code></pre>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-javascript.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", (event) => {
            Prism.highlightAll();
        });
    </script>
</body>
</html>