语法高亮插件

概述

语法高亮插件允许您在演示文稿中包含格式良好、语法高亮的代码。它会自动处理幻灯片中的 <pre><code> 元素，并根据语言应用适当的语法高亮。

除了基本的语法高亮外，该插件还提供了一些强大的功能

自动语言检测
行号显示
选择性行高亮
通过片段进行分步代码高亮
自动滚动到高亮部分

来源: plugin/highlight/plugin.js7-21

与 reveal.js 集成

语法高亮插件是 reveal.js 插件系统的一部分，该系统扩展了演示文稿的核心功能。

当 reveal.js 加载时，该插件会初始化，并通过插件 API 注册自己。初始化时，它会处理演示文稿中的所有代码块并应用语法高亮。

来源: plugin/highlight/plugin.js29-86

基本用法

要使用语法高亮插件，请将其包含在您的演示文稿中，并指定代码块的语言。

以下是包含基本代码块并进行语法高亮的方法

在您的 reveal.js 初始化中包含该插件

使用 <pre><code> 元素在幻灯片中添加代码块

插件将根据指定的语言类自动应用语法高亮到代码。

来源: plugin/highlight/plugin.js29-86

插件功能

语言检测

如果您未指定语言，该插件将使用 highlight.js 自动检测编程语言。但是，为了获得更可靠的结果，建议使用类名显式指定语言。

行号

您可以通过添加 data-line-numbers 属性来为代码块启用行号

来源: plugin/highlight/plugin.js104-106

行高亮

最强大的功能之一是能够高亮显示特定的行以强调代码的各个部分

data-line-numbers 属性接受用逗号分隔的行号和范围列表

单行: "2"
多行: "2,5"
行范围: "4-6"
组合: "2,4-6,8"

来源: plugin/highlight/plugin.js260-301

分步代码高亮

该插件支持使用管道符（|）作为分隔符，对代码的不同部分进行分步高亮

每一步都会创建一个片段，在您浏览演示文稿时逐一显示。

来源: plugin/highlight/plugin.js109-146

插件架构

语法高亮插件由几个协同工作的关键组件构成，以提供其功能

该插件通过以下方式工作

将自身注册到 reveal.js 框架
处理演示文稿中的所有 <pre><code> 元素
使用 highlight.js 应用语法高亮
如果需要，添加行号
根据提供的属性设置行高亮
如果需要，为分步高亮创建片段

来源: plugin/highlight/plugin.js11-390

插件工作流程

下图展示了插件处理代码块的工作流程

此工作流程展示了插件如何初始化和处理代码块，根据需要应用语法高亮、行号和行高亮。

来源: plugin/highlight/plugin.js29-86 plugin/highlight/plugin.js97-166

配置选项

语法高亮插件在初始化 reveal.js 时可以接受多个配置选项

选项	类型	默认	描述
`highlightOnLoad`	布尔值	`true`	在演示文稿加载时是否自动将高亮应用于代码块
`escapeHTML`	布尔值	`true`	是否转义代码块中的 HTML 标签
`beforeHighlight`	功能	`null`	在应用高亮之前调用的回调函数

配置示例

来源: plugin/highlight/plugin.js32-35 plugin/highlight/plugin.js67-70

行高亮语法

该插件在代码块中使用特定的语法来高亮显示行

该插件使用三个分隔符常量来解析此语法

HIGHLIGHT_STEP_DELIMITER: | (分隔不同的高亮步骤)
HIGHLIGHT_LINE_DELIMITER: , (分隔步骤中的单个行号)
HIGHLIGHT_LINE_RANGE_DELIMITER: - (表示行范围)

来源: plugin/highlight/plugin.js15-17 plugin/highlight/plugin.js315-358

高级特性

自动滚动

当高亮的代码块太大以至于无法在可见区域内显示时，插件会自动滚动以显示高亮显示的行。这确保了代码的重要部分始终对您的听众可见。

插件会计算高亮行的边界，并平滑地动画滚动位置以将这些行居中到视口中。

来源: plugin/highlight/plugin.js172-229

脚本模板

对于包含 HTML 类语法（可能被浏览器解析）的代码，您可以将代码包装在脚本模板中

这可确保像 < 和 > 这样的特殊字符被正确显示，而不会被解释为 HTML 标签。

来源: plugin/highlight/plugin.js41-48

可编辑内容的代码块

该插件支持在代码块失去焦点时重新高亮代码块，以便进行内容可编辑的代码演示

当代码块失去焦点时，它将自动重新高亮以反映任何更改。

来源: plugin/highlight/plugin.js60-63

结论

语法高亮插件是显示 reveal.js 演示文稿中代码的强大工具。通过利用 highlight.js 的功能并扩展其功能，例如行高亮和分步代码显示，它使演示者能够创建引人入胜的代码演示和解释。

该插件与 reveal.js 的无缝集成使其易于使用，同时为有需要的用户提供了高级功能。无论您是进行技术演讲、教授编程概念，还是演示代码架构，此插件都提供了您有效展示代码所需的工具。