白马号博客

在博客中实现自动代码高亮:使用 Highlight.js

作者:白马号 时间:2024-09-29 10:02:14 阅读量:0

文章简介

在现代网页设计中,代码高亮是一项重要功能,它可以提高代码的可读性和可维护性。本文将向您介绍如何使用 Highlight.js 库实现自动代码高亮,特别适合在博客中分享 HTML、CSS、JavaScript 和其他编程语言的代码。

什么是 Highlight.js?

Highlight.js 是一个轻量级的 JavaScript 库,它能够自动检测代码的语言并进行高亮显示。与其他代码高亮库不同,Highlight.js 不要求开发者为每个代码块指定语言类名,使得代码展示更加简洁和高效。

使用 Highlight.js 实现自动代码高亮的步骤

1. 引入 Highlight.js

在 HTML 模板文件<head> 部分引入 Highlight.js 的 CSS 和 JS 文件。白马号推荐使用 Monokai Sublime 主题,它具有现代而优雅的外观。

<head>
  <!-- 引入 Monokai Sublime 主题样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/monokai-sublime.min.css">
  
  <!-- 引入 Highlight.js 核心库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
  
  <!-- 初始化 Highlight.js,启用自动语言检测 -->
<script>hljs.highlightAll();</script></head>

2. 使用 <pre><code> 标签

在你的博客文章中,只需使用 <pre><code> 标签来包裹代码,而无需添加任何类名。Highlight.js 将自动检测语言并应用高亮。

<pre><code>function helloWorld() {
    console.log('Hello, World!');
}</code></pre>

3. 查看效果

当页面加载时,Highlight.js 将自动为每个代码块应用语法高亮。你可以添加多个代码块,无需担心语言标记,Highlight.js 会为你完成所有工作。

<pre><code>
<!DOCTYPE html>
<html>
    <head>
        <title>Highlight.js Example</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>
</code></pre>

3

4. 可选:自定义样式

如果默认的样式不符合你的需求,Highlight.js 提供了多种主题供选择,你可以在 Highlight.js 官方网站 中找到更多主题。此外,你还可以通过自定义 CSS 来调整代码块的样式,使其更加符合你的博客风格。


5. 最后在</body>前加入以下JS

<!-- 遍历pre标签,如果没有code自动补充并且将内容放到code标签内 -->    
<script>       
document.addEventListener('DOMContentLoaded', function() {    
const preElements = document.querySelectorAll('pre');    
preElements.forEach(function(pre) {    
if (pre.querySelector('code')) {    
return;    
}    
pre.removeAttribute('class');    
pre.removeAttribute('style');    
const codeElement = document.createElement('code');    
codeElement.appendChild(pre.firstChild);    
pre.appendChild(codeElement);    
});    
});    
</script>

结论

使用 Highlight.js 库,你可以轻松实现自动代码高亮,提高博客代码展示的美观性和可读性。通过简单的步骤,你可以让你的博客更加专业,让读者更容易理解代码内容。

希望这篇文章对你有所帮助,赶快去你的博客上试试吧!