这次出一个题外的（满足后台私信我的）

最新推荐文章于 2024-10-10 11:15:29 发布

Hi, how are you

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量534

点赞数 12

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_57898612/article/details/140865880

版权

昨天有位粉丝后台私信我，说要出一个前端的高亮代码输出，安排一下！

前端代码高亮详解：从基础到放弃

选择合适的工具

目前，常用的代码高亮库有 Prism.js 和 Highlight.js。我们将分别介绍这两个库，帮助你选择最适合的工具。

Prism.js

优点：

轻量级，性能优越。
支持丰富的编程语言。
容易定制和扩展。

缺点：

需要手动引入不同语言的支持文件。

Highlight.js

优点：

自动检测编程语言。
支持广泛的编程语言和主题。
社区活跃，更新频繁。

缺点：

相对于 Prism.js，体积较大。

安装和引入库

Prism.js

引入 CSS 和 JavaScript 文件

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>

2.引入特定语言支持

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-javascript.min.js"></script>

Highlight.js

引入 CSS 和 JavaScript 文件

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

自动检测和高亮代码

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

基本使用方法

Prism.js

HTML 示例

<pre><code class="language-javascript">
// JavaScript 代码示例
function sayHello() {
    console.log("Hello, World!");
}
</code></pre>

JavaScript 无需额外 JavaScript 代码，Prism.js 会自动处理。

Highlight.js

HTML 示例

<pre><code class="javascript">
// JavaScript 代码示例
function sayHello() {
    console.log("Hello, World!");
}
</code></pre>

2.JavaScript

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

高级配置

自定义主题和样式

Prism.js

选择主题 你可以从 Prism.js 主题库中选择适合的主题，引入相应的 CSS 文件。
自定义样式

pre[class*="language-"] {
    background: #f5f5f5;
    border-radius: 5px;
    padding: 10px;
}

code[class*="language-"] {
    color: #d6336c;
}

Highlight.js

选择主题 访问 Highlight.js 主题库选择适合的主题，引入相应的 CSS 文件。
自定义样式

pre {
    background: #282c34;
    border-radius: 5px;
    padding: 10px;
    overflow: auto;
}

code {
    color: #61dafb;
}

动态加载代码

Prism.js

HTML

<pre><code id="dynamic-code" class="language-javascript"></code></pre>

2.JavaScript

<script>
document.getElementById('dynamic-code').textContent = `
// 动态加载的 JavaScript 代码
function greet(name) {
    return \`Hello, \${name}!\`;
}
`;
Prism.highlightElement(document.getElementById('dynamic-code'));
</script>

Highlight.js

HTML

<pre><code id="dynamic-code" class="javascript"></code></pre>

2.JavaScript

<script>
document.getElementById('dynamic-code').textContent = `
// 动态加载的 JavaScript 代码
function greet(name) {
    return \`Hello, \${name}!\`;
}
`;
hljs.highlightElement(document.getElementById('dynamic-code'));
</script>

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码高亮示例</title>
    <!-- 引入 CSS 和 JavaScript 文件 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" />
    <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>
</head>
<body>
    <h1>代码高亮示例</h1>
    <pre><code class="language-javascript">
    // JavaScript 代码示例
    function sayHello() {
        console.log("Hello, World!");
    }
    </code></pre>
    <pre><code id="dynamic-code" class="language-javascript"></code></pre>
    <script>
    document.getElementById('dynamic-code').textContent = `
    // 动态加载的 JavaScript 代码
    function greet(name) {
        return \`Hello, \${name}!\`;
    }
    `;
    Prism.highlightElement(document.getElementById('dynamic-code'));
    </script>
</body>
</html>