reveal-md如何实现代码高亮？

Question

**问题描述：** 在使用 reveal-md 制作技术演示文稿时，如何实现代码块的语法高亮？reveal-md 默认是否支持代码高亮？如果不支持，应如何配置第三方语法高亮库（如 highlight.js 或 prism.js）以实现代码样式渲染？是否需要额外引入 CSS 主题或修改配置文件？如何确保不同语言的代码在幻灯片中正确高亮显示？

Answer 1

一、reveal-md 简介与代码高亮支持情况

reveal-md 是一个基于 Markdown 的工具，用于快速生成基于 reveal.js 的演示文稿。它简化了使用 Markdown 编写幻灯片的过程，非常适合技术文档和演讲。

关于代码块的语法高亮，reveal-md 默认情况下 并不直接支持代码高亮。它依赖于底层的 reveal.js 框架，而默认的 reveal.js 也没有内置语法高亮功能。

因此，要在 reveal-md 中实现代码块的语法高亮，必须手动集成第三方语法高亮库，如 highlight.js 或 prism.js。

常见问题一览表

问题	答案
reveal-md 默认是否支持代码高亮？	不支持，需手动集成
推荐使用哪种语法高亮库？	highlight.js 或 prism.js 均可
是否需要引入 CSS 主题？	是的，用于控制代码样式
如何确保不同语言代码正确高亮？	需加载对应语言的语法定义

二、集成 highlight.js 实现语法高亮

highlight.js 是一个流行的语法高亮库，支持多种编程语言，并且易于集成到 reveal.js 项目中。

步骤如下：

1. 安装 reveal-md（如尚未安装）：

   npm install -g reveal-md

2. 创建或修改 slides.md 文件，添加代码块：

   ```javascript
   console.log("Hello, world!");
   ```

3. 创建 index.html 或使用 --template 参数指定模板，引入 highlight.js 和 CSS 主题：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
   <script>
     document.addEventListener('DOMContentLoaded', (event) => {
       document.querySelectorAll('pre code').forEach((block) => {
         hljs.highlightBlock(block);
       });
     });
   </script>

三、集成 prism.js 实现语法高亮

prism.js 是另一个广受欢迎的语法高亮库，支持模块化加载语言包，适合需要自定义语言支持的场景。

集成步骤：

1. 引入 prism.js 和对应语言插件：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>

2. Markdown 中使用语言标识：

   ```javascript
   function greet() {
     console.log("Hello");
   }
   ```

四、配置与优化建议

为了确保语法高亮在 reveal-md 中稳定运行，建议进行如下配置：

• 使用 CDN 引入 highlight.js 或 prism.js 及其样式文件
• 在 reveal-md 启动时加载自定义 HTML 模板，例如：

  reveal-md slides.md --template template.html

• 配置 CSS 主题文件，确保代码块在不同背景主题下清晰可读

mermaid 流程图：语法高亮集成流程

graph TD
      A[开始] --> B[选择语法高亮库]
      B --> C{是否使用 highlight.js?}
      C -->|是| D[引入 highlight.js 和 CSS 主题]
      C -->|否| E[引入 prism.js 和语言插件]
      D --> F[编写 Markdown 代码块]
      E --> F
      F --> G[配置 reveal-md 模板]
      G --> H[预览演示文稿]