在RMarkdown Reveal.js演示文稿中分区幻灯片并自定义样式

1. 基础配置（YAML） #

先在RMarkdown的头部指定输出格式，并引入自定义CSS（或直接嵌入样式）：

---
title: "多区域布局演示"
output:
  revealjs::revealjs_presentation:
    self_contained: true
---

2. 自定义CSS布局与样式 #

通过CSS的Flex/Grid布局实现分栏，同时定制区域样式。可以直接在文档内嵌入<style>块，无需单独文件：

<style>
/* 两栏布局容器 */
.two-columns {
  display: flex;
  gap: 20px; /* 栏间距 */
  height: 80vh; /* 占幻灯片高度80% */
}

/* 通用栏样式 */
.column {
  flex: 1; /* 宽度平分 */
  padding: 20px;
  border-radius: 8px;
}

/* 左栏定制样式 */
.left-column {
  background-color: #f0f8ff;
  border: 1px solid #add8e6;
}

/* 右栏定制样式 */
.right-column {
  background-color: #fff8dc;
  border: 1px solid #deb887;
}

/* 三栏布局容器 */
.three-columns {
  display: flex;
  gap: 15px;
  height: 75vh;
}

.three-columns .column {
  flex: 1;
  padding: 15px;
}

.column-1 { background: #e6f7ff; }
.column-2 { background: #fff2e6; }
.column-3 { background: #f6ffed; }

/* 上下分区布局 */
.top-bottom-layout {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 80vh;
}

.top-section {
  flex: 1; /* 高度占比1份 */
  background: #f5f5f5;
  padding: 20px;
}

.bottom-section {
  flex: 2; /* 高度占比2份 */
  background: #e8f4f8;
  padding: 20px;
}
</style>

3. 在幻灯片中使用布局 #

直接用<div>包裹内容并添加对应的CSS类即可：

## 两栏布局示例
<div class="two-columns">
  <div class="column left-column">
    ### 左侧区域
    - 支持所有Markdown语法
    - 自定义背景与边框
    - 可放文本/列表
  </div>
  <div class="column right-column">
    ### 右侧区域
    可嵌入代码或表格：
    ```r
    # R代码示例
    x <- 1:10
    plot(x, sin(x))
    ```
  </div>
</div>

---

## 三栏布局示例
<div class="three-columns">
  <div class="column column-1">
    **第一栏**<br>
    内容模块1
  </div>
  <div class="column column-2">
    **第二栏**<br>
    内容模块2
  </div>
  <div class="column column-3">
    **第三栏**<br>
    内容模块3
  </div>
</div>

---

## 上下分区布局示例
<div class="top-bottom-layout">
  <div class="top-section">
    ### 顶部标题区
    幻灯片核心主题/摘要
  </div>
  <div class="bottom-section">
    ### 底部内容区
    详细内容展示，高度占比更大
  </div>
</div>

4. 自定义调整技巧 #

• 修改flex属性值可改变区域的宽/高占比（比如flex:3会比flex:1的区域大2倍）
• 可自由添加CSS属性：字体颜色、边框样式、阴影、margin等，完全匹配需求
• 若需要更复杂的网格布局，可将display: flex替换为display: grid，搭配grid-template-columns等属性实现

内容的提问来源于stack exchange，提问作者te time