Highlight.js 使用教程

Highlight.js 使用教程

highlightRich featured syntax highlighter for Keynote slides.项目地址:https://gitcode.com/gh_mirrors/highl/highlight

项目介绍

Highlight.js 是一个广泛使用的代码高亮库，能够自动识别语言并为源代码提供美观的着色。它支持超过 180 种编程和标记语言，非常适合用于网站上的代码展示，博客，文档以及其他任何需要显示代码片段的场合。此项目可以在 GitHub 找到其最新源码和更新。

项目快速启动

要快速开始使用 Highlight.js，遵循以下步骤：

安装

你可以通过 npm 或直接下载文件来获取 Highlight.js。

通过 npm 安装

npm install highlight.js

或者直接从 GitHub 下载压缩包。

引入 Highlight.js

在 HTML 文件中引入 Highlight.js 的 CSS 和 JavaScript 文件。

<link rel="stylesheet" href="path/to/styles/default.min.css">
<script src="path/to/highlight.pack.js"></script>

高亮代码

将代码包裹在 <pre><code> 标签中，并设置 class 属性为语言名称。

<pre><code class="hljs javascript">
function helloWorld() {
    console.log('Hello, world!');
}
</code></pre>

自动高亮

你需要在 JavaScript 中手动调用 highlightAll() 来激活高亮。

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

应用案例和最佳实践

在实际应用中，为了达到更好的用户体验，可以结合动态加载和特定语言的自定义样式。例如，对于服务器端渲染的应用，可以在内容加载完成后执行 hljs.highlightElement(element) 来针对特定元素进行高亮处理。

动态加载代码块

如果你的页面是通过 AJAX 加载内容，确保在新内容插入 DOM 后调用 highlightAll() 或对具体元素调用 highlightElement()。

典型生态项目

虽然提供的 GitHub 链接指向 Highlight.js 的一个特定分支或版本（这里假设是 taggon 用户的 fork），标准的 Highlight.js 已经集成到了许多生态项目中，包括但不限于静态站点生成器（如 Jekyll, Hugo）、Markdown 渲染引擎以及各种编辑器插件。这些生态项目利用 Highlight.js 提供强大的代码高亮功能，简化了开发者和作者在不同平台下保持一致的代码呈现风格的需求。

注意：上述示例中的路径 (path/to/styles/default.min.css 和 path/to/highlight.pack.js) 需要替换为你实际存放 Highlight.js 文件的路径。

以上就是 Highlight.js 的基本使用教程，更多高级特性和配置选项可以参考其官方文档。

highlightRich featured syntax highlighter for Keynote slides.项目地址:https://gitcode.com/gh_mirrors/highl/highlight