Highlight.js 使用指南

Highlight.js 使用指南

highlight.jsJavaScript syntax highlighter with language auto-detection and zero dependencies.项目地址:https://gitcode.com/gh_mirrors/hi/highlight.js

项目介绍

Highlight.js 是一个广泛使用的代码高亮库，能够自动识别代码块的语言并进行相应的语法高亮处理。它支持多种编程语言，且设计上轻量级，易于集成到网页中。无需预编译或额外服务器端组件，只需简单引入即可实现优雅的代码显示。

项目快速启动

要快速启动 Highlight.js，首先需要获取库文件。可以通过 CDN 或者直接从 GitHub 克隆仓库。

通过 CDN 引入

在你的 HTML 文件中加入以下链接来快速开始：

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

然后，你需要手动调用 hljs.highlightBlock 来高亮指定的代码块，或者简单地让 Highlight.js 自动查找所有的 <pre><code> 块并高亮它们：

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

示例代码块

下面是如何在 HTML 中标记一个代码块的示例：

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

应用案例和最佳实践

自定义样式

除了默认样式，你可以定制自己的 CSS 样式以匹配网站的主题。例如，将所有 .hljs-keyword 的颜色更改为蓝色：

.hljs-keyword {
  color: blue;
}

动态加载内容时的高亮

如果你的页面通过 AJAX 加载内容，确保在新内容加载后调用 hljs.highlightAll()。

典型生态项目

尽管 Highlight.js 本身就是一个独立的库，但它与多个编辑器和框架进行了整合，例如：

• 静态站点生成器（如 Jekyll、Hugo）：通常通过配置文件添加 Highlight.js 支持。
• Markdown 渲染引擎：许多 Markdown 到 HTML 的转换器，如 GitLab、GitHub flavored Markdown，都内置了对 Highlight.js 的支持。
• Vue.js 和 React 等前端框架：有特定的插件或组件允许轻松集成 Highlight.js，用于代码片段的渲染。

通过这些生态项目的支持， Highlight.js 能够无缝融入不同的开发环境和工作流程之中，提供一致且高质量的代码高亮体验。

---

以上就是 Highlight.js 的基本使用介绍，希望对你有所帮助！

highlight.jsJavaScript syntax highlighter with language auto-detection and zero dependencies.项目地址:https://gitcode.com/gh_mirrors/hi/highlight.js