vscode-reveal 使用教程

vscode-reveal 使用教程

vscode-reveal Revealjs vsCode extension 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-reveal

1. 项目介绍

vscode-reveal 是一个 Visual Studio Code 的扩展，它允许用户直接从打开的 Markdown 文档中显示 reveal.js 幻灯片演示。reveal.js 是一个功能丰富的 Markdown 幻灯片框架，可以制作出响应式和交互式的幻灯片。

2. 项目快速启动

安装扩展

在 Visual Studio Code 商店中搜索 vscode-reveal 并安装。

配置

安装完成后，你可以通过以下步骤配置你的 Markdown 文档：

1. 打开一个新的 Markdown 文件。
2. 使用默认的幻灯片分隔符（--- 或 ^(?:\s*)---(?:\s*)$）来创建你的幻灯片。

例如：

---
title: 我的幻灯片
---

## 第一张幻灯片

这里是一些内容。

---

## 第二张幻灯片

这里是一些其他内容。

预览幻灯片

• 在编辑器中打开 Markdown 文件。
• 点击状态栏上的幻灯片计数器，以在编辑器右侧打开预览。
• 或者，在文档中包含 --- 分隔符后，按下 Ctrl+P 打开幻灯片预览。

在浏览器中查看

在预览窗口中，点击状态栏上的地址，将会在默认浏览器中打开幻灯片。

停止服务器

当不需要服务器时，点击预览窗口中的红色停止按钮。

3. 应用案例和最佳实践

自定义主题

如果你想要使用自定义主题，可以创建一个 CSS 文件（例如 my-theme.css），并在 Markdown 文档的 YAML 前言中引用它：

---
customTheme: "my-theme"
---

代码高亮

使用代码块时，可以设置高亮主题。在 YAML 前言中添加如下配置：

---
highlightTheme: "zenburn"
---

揭示.js 选项

在 YAML 前言中，你可以设置各种 reveal.js 选项来自定义演示效果。例如：

---
revealjs.theme: "white"
revealjs.highlightTheme: "zenburn"
revealjs.controls: true
revealjs.progress: true
revealjs.slideNumber: true
---

4. 典型生态项目

vscode-reveal 作为 Visual Studio Code 的扩展，是 reveal.js 生态系统中的一部分。以下是一些相关的生态系统项目：

• reveal.js: reveal.js 的核心项目，用于创建 Markdown 幻灯片。
• highlight.js: 用于代码块高亮的 JavaScript 库。
• marked: 将 Markdown 转换为 HTML 的 JavaScript 库。

通过整合这些项目，vscode-reveal 提供了一个强大的 Markdown 幻灯片创建和演示工具。

vscode-reveal Revealjs vsCode extension 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-reveal