正文

轻松掌握博客园highlight.js配置：5步教你实现代码高亮

/0 浏览量
0510

在博客园等平台上，为了提升文章的可读性和专业性，代码高亮功能是必不可少的。Highlight.js 是一个轻量级的 JavaScript 库，它可以轻松地为代码块添加高亮显示。下面，我将详细讲解如何在博客园上配置 highlight.js，只需五步，让你轻松实现代码高亮效果。

第一步：引入 highlight.js 库

首先，你需要在你的博客园模板中引入 highlight.js 库。这可以通过 CDN 链接来实现，以下是一个示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码高亮配置指南</title>
    <!-- 引入 highlight.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

这里我们使用了 Atom One Dark 主题，你也可以根据自己的喜好选择其他的主题。

第二步：设置代码块

在博客园中，你可以通过 <pre> 和 <code> 标签来包裹你的代码。为了确保代码块被 highlight.js 正确识别，可以使用 class="language-[language]" 属性来指定代码的语言类型。

<pre><code class="language-python">print("Hello, World!")</code></pre>

在这个例子中，language-python 表示这是一个 Python 代码块。

第三步：初始化 highlight.js

在页面加载完成后，你需要使用 highlight.js 的初始化函数来激活代码高亮效果。以下是一个示例：

<script>
    document.addEventListener('DOMContentLoaded', function () {
        hljs.highlightAll();
    });
</script>

这段代码会在文档加载完成后执行，调用 hljs.highlightAll() 函数来为所有代码块应用高亮。

第四步：自定义高亮样式

如果你对默认的主题不满意，可以通过自定义 CSS 来调整高亮样式。你可以在 <style> 标签中添加以下内容：

pre {
    background-color: #f8f8f8;
    border: 1px solid #dcdcdc;
    padding: 10px;
}

code {
    font-family: monospace;
}

这将改变代码块的背景颜色和边框样式。

第五步：测试高亮效果

完成以上步骤后，保存你的页面，并打开它来测试代码高亮效果。你应该能看到你的代码被正确地高亮显示了。

通过以上五个步骤，你就可以在博客园上轻松地实现代码高亮功能了。Highlight.js 的灵活性和易用性使得它在代码展示方面非常受欢迎。希望这篇指南能帮助你快速上手，让你的博客文章更加专业和易读。

-- 展开阅读全文 --