Spectacle项目中的Markdown幻灯片布局详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00659/article/details/148416937

Spectacle项目中的Markdown幻灯片布局详解

spectacle A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code. 项目地址: https://gitcode.com/gh_mirrors/spectacle2/spectacle

前言

在现代技术演讲和演示中，优秀的幻灯片工具至关重要。Spectacle作为一款基于React的演示工具，提供了强大的Markdown支持，让用户能够通过简单的语法创建专业级的幻灯片。本文将深入探讨Spectacle中的Markdown幻灯片布局功能，帮助开发者高效创建结构清晰的演示文稿。

Markdown幻灯片基础

Spectacle使用三个连字符(---)作为幻灯片的分隔符，这是Markdown幻灯片的标准语法。但Spectacle在此基础上进行了扩展，允许通过JSON配置对象来定义幻灯片的布局方式。

基本语法示例

--- 
{ "layout" : "columns" }

::section

左侧内容

::section

右侧内容

---

布局类型详解

1. 列式布局(Columns Layout)

列式布局是创建多栏内容展示的理想选择，特别适合比较性内容或并排展示多个元素。

技术实现

列式布局的底层使用FlexBox实现，具有以下特性：

默认采用flexDirection: row实现水平排列
各列内容顶部对齐(alignItems: start)
各列等分可用空间(flex: 1)

使用场景

产品特性对比
前后效果展示
多图并列展示
代码与效果并排演示

最佳实践

--- { "layout" : "columns" }

::section

```javascript
// 示例代码
function hello() {
  console.log("Hello World!");
}

::section

执行结果


### 2. 居中布局(Center Layout)

居中布局适合突出展示单个重要内容，如关键图表、核心观点或重要数据。

#### 技术实现

居中布局的底层同样使用FlexBox：
- 水平和垂直方向都居中(`justifyContent: center`, `alignItems: center`)
- 占据全部可用高度(`height: "100%"`)

#### 使用场景

- 重要数据展示
- 关键图表呈现
- 核心观点强调
- 全屏图片展示

#### 最佳实践

```markdown
--- { "layout" : "center" }

![架构图](architecture.png)

<small>图1. 系统整体架构设计</small>

---