Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Marp 入门与教程:让你一分钟爱上Markdown写PPT的乐趣

Marp 入门与教程:让你一分钟爱上Markdown写PPT的乐趣

作者头像
码事漫谈
发布于 2024-12-20 05:26:22
发布于 2024-12-20 05:26:22
4.6K057
代码可运行
举报
文章被收录于专栏:设计模式设计模式
运行总次数:57
代码可运行

Marp 入门与教程

一、什么是 Marp?

Marp 是一个基于 Markdown 的开源幻灯片制作工具,可以轻松将 Markdown 文档转换为精美的幻灯片。其核心是 Marpit 框架,支持可定制主题、多种输出格式和动态功能。

与 LaTeX 的 Beamer 比较:

对比项

Marp

LaTeX (Beamer)

易用性

使用 Markdown 语法,易学易用

基于 TeX,语法复杂,学习曲线陡峭

功能扩展性

- 支持 CSS 定制- 支持图片背景- 支持 Mermaid 图表- 支持自动布局和响应式设计

- 强大的数学公式支持- 适合编写专业文档- 高级的排版控制

输出支持

HTML、PDF、PPTX

PDF

实时预览

可通过 VS Code 插件快速预览

缺乏直观的实时预览

适用场景

快速演示文稿、轻量级幻灯片

高端学术演示或复杂幻灯片

总结:Marp 更适合需要快速生成现代化演示文稿的用户,而 LaTeX Beamer 更适合专业的学术排版。


二、Marp 支持的功能

  1. 通过插件快速制作:支持 VS Code 插件和实时预览。
  2. 命令行工具 (CLI):批量处理,导出 HTML、PDF 等格式。
  3. 支持 YAML 配置:灵活设置幻灯片主题、尺寸和分页。
  4. 自定义样式:支持 CSS 修改主题和排版样式。
  5. 嵌入动态内容:如代码高亮、公式 (MathJax)、图片背景等。
  6. 多种主题支持:内置主题(default、gaia、uncover)和自定义扩展主题。

三、功能介绍与入门教程

1. 使用 VS Code 插件
功能简介
  • 提供实时预览功能。
  • 可一键导出 PDF。
  • 支持 Markdown 语法高亮。
入门教程
  1. 安装 VS Code 和插件
    • 下载并安装 VS Code
    • 在扩展商店搜索并安装 Marp for VS Code 插件。

新建 Markdown 文件 创建一个 .md 文件,并在文件开头加入以下 YAML 配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
---
marp: true
theme: uncover
size: 16:9
paginate: true
backgroundColor: #f0f0f0
---
  1. 实时预览 点击下图 Marp 图标,即可看到实时幻灯片预览。
1
1
  1. 导出 PPT 点击下图图标,选择Export……,最后在保存类型处点击下拉框选择要保存的文件类型
2
2

2. 使用 CLI 工具
功能简介
  • 支持批量生成和自动化处理。
  • 输出 HTML、PDF 等格式。
入门教程

安装 CLI 工具

安装 Node.js 环境。

执行以下命令安装 Marp CLI:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g @marp-team/marp-cli

创建 Markdown 幻灯片 示例内容如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
---
marp: true
theme: gaia
size: 4:3
---
# 欢迎使用 Marp
- 简单
- 快速
- 美观

导出为 PDF 或 HTML

导出 PDF:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
marp slide.md -o slide.pdf

实时预览:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
marp slide.md --preview

3. 自定义主题
功能简介

通过 CSS 修改样式,满足品牌化或个性化需求。

入门教程

创建主题 CSS 文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@import 'https://fonts.googleapis.com/css?family=Roboto';

section {
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    color: #333333;
}

h1 {
    font-size: 2.5em;
    color: #ff5733;
}

引用自定义主题 在 Markdown 文件中添加:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
---
marp: true
theme: custom
---

应用主题 使用 CLI 或插件预览效果。


四、Marp 的优势与应用案例

  1. 快速上手
    • 对比 LaTeX Beamer,不需要复杂的语法和环境配置,学习成本低。
    • YAML 配置简单明了。
  2. 跨平台支持
    • 支持在不同系统(Windows、macOS、Linux)下运行,且兼容多种编辑器。
  3. 现代化设计
    • 内置主题时尚美观,支持动态背景和交互内容。
  4. 适用场景丰富
    • 技术分享:嵌入代码片段、公式等内容。
    • 工作汇报:快速制作专业化演示文稿。
    • 教学场景:Markdown 文本轻松生成幻灯片。
应用案例:
  • 技术分享:通过 VS Code 插件,工程师可以快速构建内含代码高亮的技术演示。
  • 团队培训:CLI 批量生成幻灯片,满足大规模培训需求。
  • 个人总结:写笔记的同时生成高质量幻灯片,一举两得。

五、学习参考链接

  1. Marp 官方网站
  2. Marp VS Code 插件
  3. Marpit Markdown 文档
  4. 少数派 Marp 教程
  5. Marp GitHub 仓库

按以上步骤学习后,相信你能快速掌握 Marp,并将其高效应用于日常工作和学习中。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-12-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Marp 教程:使用 VSCode 编写专业 PPT
Marp 是 Markdown Presentation Ecosystem 的简称,它允许你使用 Markdown 语法来创建和展示幻灯片。通过结合 VSCode 的强大编辑功能,Marp 可以让你的 PPT 制作过程变得更加高效和专业。本教程将指导你如何在 VSCode 中使用 Marp 来创建精美的幻灯片。
码事漫谈
2024/12/20
4750
Marp 教程:使用 VSCode 编写专业 PPT
Marp —用Markdown编写PPT
Marp 是一个用 Markdown 编辑幻灯片的跨平台免费软件,用户在左侧区域编辑 MD 文本,可在右侧即时显示效果。软件支持多种主题配色,在幻灯片内可插入 Emoji、数学公式,自定义背景,导出为 PDF 文档。
后端码匠
2019/11/18
2.4K0
Marp 教程:如何在 VSCode 中引入自定义样式和主题
Marp 是一个基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可以让你的 PPT 制作过程变得更加高效和专业。本文将详细介绍如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。
码事漫谈
2024/12/20
4970
Marp 教程:如何在 VSCode 中引入自定义样式和主题
一种用markdown写PPT的方法,再也不用费劲排版了
今天看jeremyxu 的技术点滴,发现分享了一个 markdown 写 PPT 的插件,惊为天人,先来看看官方效果图。
机智的程序员小熊
2020/06/23
4.6K0
Markdown 写 PPT 是如何实现的?
Markdown 是一种轻量的标记语言,我们只需要写 md 格式文件,不必考虑文档的排版,被广泛用于博客写作,技术文档编写等,程序员们都热爱,但我们工作中除了写文档,有时候还需要汇报工作,技术分享等,需要用到 PPT,但设计 PPT 可能不是每个程序员所喜欢的,所以我们可以使用一个非常好用的工具 slidev, 可以使用 markdown 来制作演示文稿, 这个工具很多小伙伴都知道,尤大的分享就经常使用,其他类似的工具还有 Nodeppt、 marp 等,那么这类工具是如何实现的?
狂奔滴小马
2022/09/21
1K0
Markdown 写 PPT 是如何实现的?
使用 Marp 将 Markdown 导出为 PPT 后不可编辑的原因说明及解决方案
Marp 是一个流行的 Markdown 演示文稿工具,能够将 Markdown 文件转换为 PPTX 格式。然而,用户在使用 Marp 导出 PPT 时,可能会遇到以下问题:
码事漫谈
2024/12/20
6170
使用 Marp 将 Markdown 导出为 PPT 后不可编辑的原因说明及解决方案
Marp 教程:实现幻灯片动画效果
Marp 是一个基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可以让你的 PPT 制作过程变得更加高效和专业。虽然 Marp 本身不支持复杂的动画效果,但通过 CSS 和 JavaScript,可以实现一些简单的动画效果来增强幻灯片的视觉吸引力。本教程将详细介绍如何在 Marp 中实现幻灯片的动画效果。
码事漫谈
2024/12/20
3950
Marp 教程:实现幻灯片动画效果
Marp 教程:实现幻灯片的交互性
Marp 是一个基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可以让你的 PPT 制作过程变得更加高效和专业。虽然 Marp 本身不支持复杂的交互性,但通过嵌入 HTML 和 JavaScript,可以实现一些简单的交互效果。本教程将详细介绍如何在 Marp 中实现幻灯片的交互性。
码事漫谈
2024/12/20
3410
Marp 教程:实现幻灯片的交互性
Marp 教程:实现分栏和其他高级排版技巧
Marp 是一个基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可以让你的 PPT 制作过程变得更加高效和专业。本文将详细介绍如何在 Marp 中实现分栏和其他高级排版技巧,使你的幻灯片更加美观和有条理。
码事漫谈
2024/12/20
3360
Marp 教程:实现分栏和其他高级排版技巧
36.3K star!开发者专属PPT神器,Markdown秒变炫酷幻灯片!
嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
小华同学ai
2025/04/26
2170
36.3K star!开发者专属PPT神器,Markdown秒变炫酷幻灯片!
工具:Slidev 简介
Slidev 是一个基于 Vue.js 的幻灯片演示工具,它可以通过 Markdown 语法来创建漂亮的幻灯片。
Freedom123
2024/03/29
9000
工具:Slidev 简介
我用markdown写PPT,五分钟完事
去年我就有看到使用markdown做ppt的帖子,因为课业压力比较大,就没认真研究。刚好前几天比较闲,就顺手看了看
陈南GISer
2023/08/19
1.6K0
我用markdown写PPT,五分钟完事
这样做PPT也太酷了吧,27.9kstar,适合开发者的ppt工具推荐
slidev 是一个基于 Vue 开发的网页演示文稿工具,主要功能是将 Markdown 文档转换为演示幻灯片。
大侠之运维
2024/09/25
2230
slidev - 为开发者打造的演示文稿工具
提起幻灯片制作工具,大家都会想到PowerPoint 或 Keynote,它们在制作带有复杂动画和图表等方面效果相当好。今天为大家介绍一款开发者友好的演示文稿工具——Slidev
埃兰德欧神
2024/07/15
2860
slidev - 为开发者打造的演示文稿工具
牛逼!用 Markdown 来做 PPT!
大多数朋友做 PPT 一般都是用的 PowerPoint 、KeyNote的吧,那你有没有用 Markdown 来编写幻灯片呢?
程序员老鱼
2022/12/02
5.1K0
Markdown 成品发布
目前 npm gitbook 项目已不再更新,请使用 GitBook.com / GitHub integration。
acc8226
2022/05/17
1.4K0
Markdown 成品发布
居然可以用 js 写 PPT?
用powerpoint或者keynote写演示文稿,对于代码、数学公式等的支持一直是个痛点。而且对于前端同学来说,一身的css功力用不上也是个痛点。对于使用markdown来写文档的同学来说,将文档转成ppt需要重新排版也是件重复性的工作量。
winty
2021/08/24
9.8K0
居然可以用 js 写 PPT?
让你用Markdown的方式来做PPT
说Slidev之前,咱先聊聊Markdown,在认识Markdown之前,各种版式样式的问题也一直困扰着TJ君,所幸Markdown的出现完美的解决了这个问题,而Slidev,或许就是和Markdown一样的一个东东哦!
AWeiLoveAndroid
2022/05/13
9960
让你用Markdown的方式来做PPT
Markdown = PPT ?这个工具给力!
TJ君平时最头疼的是啥事情?当然是老大布置的各种宣传任务!所谓的宣传任务,就是写各种各样的宣传ppt,对于TJ君来说,要满足老大各种对于PPT的奇思妙想和严苛要求,还不如多写几行代码。
程序猿DD
2021/12/15
8580
Markdown = PPT ?这个工具给力!
工具:Slidev 使用指南:从入门到精通
幻灯片通过 一个 markdown 文件 编写而成 (默认会使用 ./slides.md)。
Freedom123
2024/03/29
9840
工具:Slidev 使用指南:从入门到精通
相关推荐
Marp 教程:使用 VSCode 编写专业 PPT
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档