Markdown Preview Enhanced 演示文稿制作全指南

屈心可

于 2025-06-10 09:00:10 发布

阅读量387

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00558/article/details/148548460

Markdown Preview Enhanced 演示文稿制作全指南

markdown-preview-enhanced One of the 'BEST' markdown preview extensions for Atom editor! 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-preview-enhanced

什么是 Markdown Preview Enhanced 演示功能

Markdown Preview Enhanced 是一款强大的 Markdown 预览增强工具，它内置了基于 reveal.js 的演示文稿渲染功能。这意味着你可以使用简单的 Markdown 语法来创建专业级的幻灯片演示，而无需学习复杂的演示软件。

为什么选择它来制作演示文稿

纯文本编辑：所有内容都用 Markdown 编写，便于版本控制和协作
代码友好：对技术演示特别友好，支持代码高亮和实时执行
主题丰富：提供多种内置主题，一键切换演示风格
高度可定制：可以通过 CSS 和配置项深度定制每一页幻灯片

快速开始

基础演示文稿结构

创建一个最简单的演示文稿只需要以下结构：

<!-- slide -->

# 第一页标题
这里是第一页内容

<!-- slide -->

## 第二页标题
这里是第二页内容

 注释用于分隔不同的幻灯片页面。

配置演示文稿参数

通过 YAML front-matter 可以配置整个演示文稿的全局设置：

---
presentation:
  theme: night.css
  width: 1024
  height: 768
  transition: convex
---

<!-- slide -->
# 我的演示文稿

深度配置详解

主题选择

Markdown Preview Enhanced 支持多种 reveal.js 主题：

beige.css - 米色背景
black.css - 黑色背景（适合深色环境）
blood.css - 深红色主题
league.css - 深色渐变主题
moon.css - 深蓝渐变
night.css - 纯黑背景
serif.css - 衬线字体风格
simple.css - 简洁白色
sky.css - 天蓝色渐变
solarized.css - Solarized 配色
white.css - 纯白背景

过渡效果

可以设置幻灯片切换时的动画效果：

transition: 'convex'  # 可选: none/fade/slide/convex/concave/zoom
transitionSpeed: 'fast'  # 可选: default/fast/slow

高级功能配置

演讲者笔记：启用后可以添加演讲者专用备注
自动播放：设置自动切换幻灯片的时间间隔
循环播放：演示结束后自动重新开始
随机顺序：每次加载随机排列幻灯片顺序
移动端优化：隐藏地址栏等移动端专属设置

幻灯片个性化定制

单页幻灯片定制

可以为特定幻灯片添加自定义 ID 和类名：

<!-- slide id="agenda" class="highlight-slide" -->
## 议程
- 项目介绍
- 技术架构
- 演示环节

通过 CSS/Less 深度定制

创建或修改你的 .less 样式文件来定制演示文稿外观：

.markdown-preview.markdown-preview {
  .reveal .slides {
    font-family: "Microsoft YaHei", sans-serif;
    
    section {
      &.highlight-slide {
        background-color: #f5f5f5;
      }
      
      &:nth-child(2) {
        h2 {
          color: #ff5252;
        }
      }
    }
  }
}