【Marp】基于Markdown-Marp快速制作PPT

最新推荐文章于 2024-06-11 20:34:38 发布
最新推荐文章于 2024-06-11 20:34:38 发布
阅读量4.2k 收藏 21
点赞数 2
分类专栏： 技能树 效率（工具，心得） 文章标签： powerpoint
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33934427/article/details/134915231
版权

【Marp】基于Markdown-Marp快速制作PPT

文章目录

零、参考资料

除了Marp，Slidev也可以将md转成PPT

一、Marp基本语法（创建分页，排版图片，更换主题，Marp扩展指令修改样式）

参考

1、创建新的PPT页面

在末尾添加 3 个短横线 -，下方就会多出一张新的幻灯片。

2、插入图片 & 排版图片

如果我们想要在幻灯片中插入图片，就会略微麻烦一些。直接插入的本地图片，渲染后会显示为丢失，解决的方法是先将本地图片上传到网上（图床），再粘贴图片链接 ，图片才能正常显示。关于图片的语法如下：

  • 图片缩放：
    在这里插入图片描述

  • 图片处理：

    在这里插入图片描述

  • 背景图片排版：

    • 水平排版：
      在这里插入图片描述

    • 垂直排版：

    在这里插入图片描述

    关于图片的更多排版参数，参考 Image syntax

    在这里插入图片描述

3、更改全局主题（default，uncover，gaia）

Marp 渲染得到的幻灯片默认为白底蓝/黑字，如果你不喜欢默认的样式，可以在 Markdown 文件的开头，更改 theme 字段的值，来更改幻灯片的全局主题。

theme 字段有 3 个值：

  • default（默认值，左对齐排版）
    在这里插入图片描述

  • uncover：所有内容都居中显示，引用内容的样式从竖线变为双引号

    在这里插入图片描述

  • gaia：白色背景更改为浅黄色，有点像一些阅读类 App 的暖光/护眼模式，但我不确定这种颜色是否真的护眼……；如果又想像 uncover 主题那样，让内容居中显示，则再添加一个 class 字段，值设置为 lead 即可；

    在这里插入图片描述

4、更换单个幻灯片的背景和文字颜色（Marp扩展指令（Directives））

参考 Directives

如果想自定义其中一个或多个页面的颜色，则在想要更改幻灯片背景色的页面开头，加上 <!-- _backgroundColor: 颜色--> 字段，就可以更改页面的背景色。

在这里插入图片描述

这里的颜色可以是颜色的英文，例如上面的蓝色 blue，也可以是 rgb 值，这有点像是在写 CSS 样式了；更改文本内容的颜色，需要在下面多配置一个选项 <!-- _color: 颜色-->，就能自定义文本的颜色。
在这里插入图片描述

5、将幻灯片导出为 PDF/PPT

点击 Marp Markdown 文件右上角的 Marp 图标（三角形图标），在弹出的面板，选择「Export Slide Deck」，就可以将 PPT 导出为 PDF 啦～

二、Marp高阶（Marp扩展指令，CSS全局样式，CSS局部样式，自定义CSS样式）

参考 Markdown PPT | 如何自定义Marp主题

1、通过Marp扩展指令设置相应样式（全局指令，局部指令）

参考Directives

常用的Marp扩展指令包括：

  • 全局指令（指令前不加_）和局部指令（指令前加_）的用法

    # Global directives
<!-- backgroundColor: aqua -->
This page has aqua background.

# Local directives
<!-- _backgroundColor: aqua -->
Add underscore prefix `_` to the name of local directives.

  • 全局指令

    在这里插入图片描述

  • 局部指令

    在这里插入图片描述

2、CSS全局样式修改/局部样式修改（CSS与MD的映射，CSS与Marp扩展指令的映射）

CSS与MD的映射：section - ‘画布‘，h1 - ‘#‘，blockquote - ‘>‘… ；

CSS与Marp扩展指令的映射：footer - footer，header - header, …

命令只能对Slide的小部分内容进行调整，如果想要对Slide的文字样式做出调整，那么就需要对全局样式和局部样式做出修改，支持CSS语法。

1）全局样式修改

  • 1）直接在markdown顶部设置style样式

    --
marp: true
theme: gaia
style: | section { background-color: #ccc; } h1 { text-align:left; }
---

    全局样式的修改是以 style 命令进行的，如上面展示的那样，我们可以在style命令中对样式进行相关修改。

  • 2）自定义CSS样式文件，修改全局样式主题

    ---
marp: true
theme: myThemes
paginate: false
---

# 基于大数据技术的农业产业园智能化管理与优化研究

    /* @theme myThemes */

@charset "UTF-8";
@import 'uncover';

/* @import-theme 'default'; */

h1 {
  text-align:left;
  color: #D32E33;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size:40px;
  line-height: 25px;
}

    其中myThemes.css为自定义的CSS样式文件，其中的<h1>标签对应MD中的#，会影响MD对应内容的显示效果

2）局部样式修改

在MD中添加CSS样式（加上scoped）

参考 Scoped style

如果只想修改本页PPT的样式，可以通过<style scoped>...</style>来添加当前页指定标签的样式，如果不带上scoped，该样式默认会作为下一个分页的样式。

---
marp: true
theme: myThemes
paginate: false
---
<!-- backgroundImage: url("./images/homePage.png") -->
<style scoped>
h1 {
  text-align:center;
  color: #D32E33;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size:60px;
  line-height: 70px;
}
</style>

# 基于大数据技术的农业产业园智能化管理与优化研究

---
<!-- backgroundImage: url("./images/header.png") -->
<!-- _header: 经验分享 -->

# markdown笔记转为带模板的组会ppt

比如上面展示了首页大标题且居中的效果，但不会影响到下一个分页的样式

在这里插入图片描述

3、自定义CSS主题文件（路径配置，声明主题并在MD中引用）

1）关于CSS文件的路径配置

如果想要使用自己的CSS主题文件，你首先需要在当前md文件夹下新建.vscode 文件夹，在该文件夹下新建settings.json文件，添加如下内容。

{
    "markdown.marp.themes": [
      "https://example.com/foo/bar/custom-theme.css",
      "custom theme.css path",
    ]
  }

custom theme.css path 要添加自定义主题文件的路径，例如 ./themes/UCASSimple.css

2）关于CSS文件中的主题别名设置

除去上面的文件，在CSS 文件头部需要添加 /* @theme <custom theme name>*/ 来声明是这是一个Marp主题，这样在编写.md 文件时就可以借助 theme: <custom theme name> 使用自定义的主题了。

随后CSS文件中需要利用@import 导入已有的主题文件，目前Marp官方有default gaia uncover 三款主题。

接着就可以编写CSS文件自定义主题了。

3）CSS文件示例

/* @theme UCASSce */@charset "UTF-8";
@import 'uncover';

section {
   font-size: 25px;
   padding: 50px;
   text-align: left;
   font-family:Arial, Helvetica, sans-serif;
   background:whitesmoke;
  }
 
  h1 {
   text-align:left;
   color: rgb(60, 112, 198);
   margin-top: 150px;
   margin-bottom: 0px;
   font-size:72px;
  }

  header {
    left: 50px;
    right: 50px;
    top: 10px;
    height: 50px;
    background-image: url("./images/logo.png"); 
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 200px;
    text-align:left;
    color: rgb(60, 112, 198);
    font-weight: bold;
    font-size:36px;
  }

自定义CSS样式文件没有起效果的主要原因

  • .vscode文件夹不是项目文件夹下的一级文件夹

    在这里插入图片描述

  • 在 .vscode/setting.json中引用的css文件相对路径有误，此时md文件会报错：

    The specified theme "myThemes" is not recognized by Marp for VS Code.marp-vscode(unknown-theme)

    在这里插入图片描述

三、Marp实战

1、关于组会PPT的Demo

参考MyMd2PPT

---
marp: true
theme: TsinghuaPPT
paginate: false
---
<!-- backgroundImage: url("./images/title.png") -->

<!-- _header: 经验分享 -->

# markdown笔记转为带模板的组会ppt

## 动机
个人习惯用markdown来记录笔记，但是组会汇报又需要固定的模板，一遍遍复制过去太耗时间，于是需要寻找一个高效的md转换为组会ppt的方法

## 步骤

1. 安装Marp for VSCode
2. 看其他教程学习Marp基础用法
3. 在.vscode中注册自定义主题
4. 编写自定义theme的.css文件
5. 享受效率吧！

---

<!-- headingDivider:  -->
<!-- prerender: true -->
<!-- _header: 工作汇报 -->

# 一级标题
一级内容
> “How well does simulation match the real world? What is the value of simulation vis-a-vis testing in a physical environment that includes other vehicles, pedestrians, and other road users?  
> 模拟与真实世界的匹配程度如何?在包含其他车辆、行人和其他道路使用者的物理环境中，仿真对测试的价值是什么?” ([pdf](zotero://open-pdf/library/items/9AULW8RM?page=1))
## 二级标题
二级内容

<!-- _footer:  ■ 总结框模板  -->

---

![bg](./images/thanks.png)

其中PPT主题用到的CSS样式如下：

/* @theme TsinghuaPPT */

@charset "UTF-8";
@import 'uncover';

/* @import-theme 'default'; */

section {
    font-size: 25px;
    padding-left: 50px;
    padding-right: 45px;
    text-align: left;
    letter-spacing: 2px;
    font-family:Arial, Helvetica, sans-serif;
    background-image: url('./title2.jpg') ;
    /* background-repeat:no-repeat; */
    /* background-attachment:fixed; */
    /* background-position:center; */
    /* margin-top: 40px; */
    padding-top: 75px;
   }

h1 {
text-align:left;
color: rgb(146, 46, 142);
margin-top: 20px;
margin-bottom: 20px;
font-size:40px;
line-height: 25px;
}

h2 {
text-align:left;
margin-top: 12px;
font-size: 30px;
line-height: 25px;
margin-bottom: 15px;
}

h3 {
  text-align:left;
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: 27px;
  line-height: 25px;
  }

p {
  text-align:left;
  font-size: 22px;
  margin-top: 7px;
  margin-bottom: 10px;
  letter-spacing: 1px;
  /* text-indent: 50px; */
}

header {
  left: 57px;
  right: 50px;
  top: 15px;
  height: 50px;
  /* background-image: url("./header.png"); 
  background-position: center;
  background-repeat: no-repeat; */
  /* background-size: 200px; */
  text-align:left;
  color: rgb(146, 46, 142);
  font-weight: bold;
  font-size:40px;
}

footer {
  height: auto;
  font-size:28px;
  border-color: rgb(146, 46, 142);
  /* border: 10px; */
  border-width: 4px;
  border-style: solid;
  font-weight: bold;
  list-style-type: square;
  content: 'shsh';
  padding-left: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
  color: rgb(37, 64, 97);
  /* display:inline-block; */
}

/* blockquote {
  background-color: rgba(231,247,239,1.0);
  padding: 10px;
  padding-inline-start: 20px;
  border-radius: 10px;
} */

blockquote {
  background: rgba(173, 216, 230, 0.15);
  border-left: 10px solid rgb(173, 216, 230);
  /* margin: 1.5em 10px; */
  padding: 0.5em 10px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  /* quotes: "\201C""\201D""\2018""\2019"; */
}
blockquote:before {
  color: #ccc;
  content: none;
  /* font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em; */
}
blockquote:after {
  color: #ccc;
  content: none;
  /* font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em; */
}
blockquote p {
  display: inline;
}

效果如下：

在这里插入图片描述

在这里插入图片描述

2、在PPT中快速插入代码和表格

这里可以结合Markdown语法优势，在PPT中快速插入代码、公式和表格

在这里插入图片描述
在这里插入图片描述

但是存在的问题是markdown的表格和代码不太好水平排版

王小希ww
关注
  • 2
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
md-ppt:降价到 PPT
06-18
Markdown PPT Markdown PPT 是一款将 Markdown 文件转换成简单 PPT 文件显示的小工具。 语法 遵循 Markdown 语法，使用水平线 hr 将 Markdown 内容分割成 PPT 页。 Markdown ************ OR * * * 示例 开始使用 按照标准格式书写 markdown 文件 打开播放器程序 将 markdown 文件拖入 "Drop markdown file" 框中 多屏互动 Markdown PPT 现已实现多屏互动，但暂时需要安装本地服务端。使用方式为： 安装并启动 air-play 服务端 cd air-play npm install node server.js 打开程序 在 Air Play 文本输入框中输入服务器地址。例如：ws://localhost:8001 连接成功后，点击 Pin Code 按钮(
marp-cli-example：Marp的作者，通过Marp CLI使用Marp的良好入门
02-04
Marp CLI示例 通过使用的很好的入门示例。 用 Markdown编写幻灯片。 通过Git管理幻灯片的内容。 （使用样式PITCHME.md ） 将您的平台托管在GitHub上，并使用 ， 和作为网页发布！ 查看已发布的幻灯片 ： : ： : ： ： 用法 开始发布幻灯片非常容易！ 通过“使用此模板”按钮，基于该存储库创建一个新的公共存储库！ 我们已经有了可以自动构建和部署从master到gh-pages 。 您只需从“设置”选项卡 。 按下“部署到网络化”按钮。 将基于此示例创建存储库，并自动从master分支托管网站。 按下“部署”按钮。 可以根据此示例选择
Marp：把你的Markdown文稿变成PPT
wlh2067的博客
03-24 4701
但 PPT 的制作流程就不像观看 PPT 那么容易了，即便是简单的课堂讨论或是轻松的内部交流，一份内容不多的 PPT 做起来也得费上一番工夫。Marp的中文参考文档，https://caizhiyuan.gitee.io/categories/skills/20200730-marp.html。用Markdown写PPT ，Marp的果壳主题，https://zhuanlan.zhihu.com/p/447797515。Marp使用也非常简单，其利用markdown的分隔符对PPT进行分页。
【markdown】【xSliders | slidev | mindshow】markdown文档生成PPT/视频
hmywillstronger的博客
05-07 2338
可以在任意位置定义style来改变格式和布局......可以在整个幻灯片中通过className引用Note: 注意不要遗漏className之前的点号"."。
使用 python 将 Markdown 文件转换为 ppt演示文稿
最新发布
Winfredzhang的博客
06-11 1205
在这篇博客中，我们将展示如何使用 wxPython 创建一个简单的图形用户界面 (GUI)，以将 Markdown 文件转换为 PowerPoint 演示文稿。我们将利用markdown2模块将 Markdown 转换为 HTML，并使用模块将 HTML 内容转换为 PowerPoint 幻灯片。本教程将演示如何通过解析 Markdown 文件的层次结构，以大纲模式生成 PPT。
探秘 Awesome Marp：让你的PPT制作焕然一新
gitblog_00019的博客
05-27 456
探秘 Awesome Marp：让你的PPT制作焕然一新 项目地址:https://gitcode.com/favourhong/Awesome-Marp 在数字时代的讲台上，一份引人入胜的演示文稿往往是成功的关键。今天，我们将深入探索一个令人耳目一新的开源宝藏——Awesome Marp，它旨在颠覆我们对Markdown编写PPT的传统认知。 项目简介 Awesome Marp是一个精心打造的项...
【Quarto】Markdown导出PPT
hmywillstronger的博客
02-28 1483
Quarto 是一个开源的科学和技术沟通工具，它可以将Markdown和 R Markdown 等内容转换成各种发布格式，如HTMLPDFEPUB和幻灯片等。以下是一个案例，展示如何使用 Quarto 将 Markdown 文本转换为多页的 PPTX 文件。首先，安装 Quarto可以访问获取。然后，创建一个新的 Markdown 文件，例如，并在文件中编写你的幻灯片内容。，并在文件中编写你的幻灯片内容。
markdown编写一个幻灯片快速入门版
m0_52475295的博客
04-01 1613
使用markdown来快速完成PPT，文档转换成PPT只需要几分钟，而且自带各种炫酷的特效
VS code+Marp实现Markdown转换成PPT格式
一枚爱吃橙子的在校工科生！
02-17 4508
Markdown转换成PPT格式的文件，网上查找一番后发现Marp、Slidev两个解决方案。由于Slidev生成的类似HTML的演讲，所以本片介绍Marp。如有更好方法请评论区告诉我，先谢为敬！（文章配有gif演示，Marp指令不做特别说明）可参照。
如何使用R Markdown创建PowerPoint演示文稿
2301_79425796的博客
08-19 964
PowerPoint演示文稿是在学术、商务和教育领域中常用的展示工具。使用R Markdown可以将数据分析和可视化结果直接转化为漂亮的PowerPoint演示文稿。
【工具介绍】组会演示神器：由markdown快速生成幻灯片--reveal-md
beidou111的博客
05-11 775
可以通过简单的markdown语法快速生成PDF幻灯片，组会神器 github地址 https://github.com/webpro/reveal-md 安装 这是基于node.js的项目 先去下载node.js 然后打开窗口键入 npm install -g reveal-md 使用 准备一个md文件 可以先去git clone下demo reveal-md a.md 得到 其中a.md内容为 Foo ![cat](sub/cat.jpg) Note: test note --- Bar
linux幻灯片制作软件,Marp(代码制作幻灯片软件)
weixin_29008055的博客
05-09 475
Marp是一款非常好用的代码制作幻灯片软件，它包括file(文件 )、edit (编辑 )、view(视图 )、help( 帮助)等选项，具有幻灯片是用Markdown写的、 支持Windows，Mac和Linux、带3种模式的实时预览、可自定义背景图片、将幻灯片导出为PDF等特色，可自定义设置预览风格等。此软件功能强大，操作简单，有需要的用户赶快下载试试吧！功能特色用户使用书写起来非常迅速，看图...
markdown_markdown制作幻灯片ppt的若干方式(marp/slidev)markdow_slidev+vscode
xuchaoxin1375的博客
03-18 1828
文章目录markdown 制作幻灯片的若干方式(marp/slidev)markdowslidev基本特点和安装导出插件的使用(vscode)marp基本特点导出 markdown 制作幻灯片的若干方式(marp/slidev)markdow slidev 基本特点和安装 When working with WYSIWYG所见即所得 editors, it is easy to get distracted by the styling options. Slidev remedies that by
presentations-revealjs:这是一个简单易用的模板，可单独使用Markdown创建Reveal.js演示文稿，并附带有用的构建脚本
05-15
dSebastien的reveal.js演示文稿模板 关于 这是一个简单易用的模板，用于单独使用Markdown创建演示文稿，并附带有用的构建脚本。 使用它，您可以： 单独使用markdown创建幻灯片 在单个配置文件中编辑元数据 根据需要在提供的模板中调整Reveal.JS 使用一些NPM命令来构建您的演示文稿并将其提供给全世界 实时查看结果（感谢 ） 现状和路线图 查看当前的 用法 克隆存储库 运行npm install --no-optional下载所有依赖项 使用markdown编辑幻灯片平台：presentation / main.md 您可以创建其他markdown（md）文件，并将它们合并到单个幻灯片中 其他md文件必须以---（幻灯片分隔符）开头，否则合并操作将无法执行您想要的操作。 文件名将决定它们的合并顺序（即，遵循文件名中的自然顺序） 请注意，“ main.
morph:将您的Markdown文档转换成幻灯片
05-25
尝试我们的新项目： 变形 使用Markdown创建幻灯片。 特征 易于使用 页面过渡动画 停止移动约2秒钟时自动隐藏光标 暂停模式（黑屏） XSS保护 开发准备 npm install bower install 开发启动脚本 npm run ng.watch # after the first command succeeded: npm run electron.watch 构建脚本 npm run build.prod cp package.json ./dist/package.json electron-packager dist morph --platform=win32 --overwrite electron-packager dist morph --platform=darwin --overwrite 缺点 应用程序包有点大 缺乏用户风格支持 参考
Marp: 将 Markdown 变为 PPT 式样的VScode 插件
10-30
这款插件极大地简化了制作幻灯片的过程，尤其是对于那些熟悉Markdown语法的人来说，他们无需学习复杂的幻灯片制作工具，就能快速创建出美观且内容丰富的演示。 Markdown的基本语法包括标题、文本样式（粗体、斜体）...
marp-cli：用于基于Marp和Marpit的转换器的CLI接口
01-30
@ marp-team / marp-cli 一个CLI接口，用于 （使用 ）和任何基于框架的幻灯片转换器。 它可以轻松地将Marp / Marpit Markdown文件转换为静态HTML / CSS，PDF，PowerPoint文档和图像。 现在就试试！ 像素 当您要...
marp-vscode：Marp for VS Code：在VS Code上创建用Marp Markdown编写的幻灯片
02-04
Marp for VS代码 ...当marp: true写在最前面时，将启用Markdown文档的Marp预览。 --- marp : true --- # Your slide deck Start writing! 也可以通过从工具栏图标打开快速选择器来进行切换 并选择
marp：Markdown演示生态系统的入口存储库
02-03
Marp ：Markdown演示生态系统 Marp是使用普通Markdown编写演示文稿的生态系统。 马尔普家族 我们的项目分布在许多存储库中，以便专注于每个存储库的有限范围。 此（ ）是Marp家族的入口，并将放置在/website 。 ...
Markdown语言生成PPT
04-06
Markdown语言本身并不支持生成PPT文件，但是可以通过一些工具将Markdown文本转换为PPT格式。 以下是一些常用的Markdown转PPT工具： 1. Marp：一个基于Electron的Markdown演示工具，支持生成PPT、PDF和HTML格式的演示文稿。使用Marpslide主题可以生成漂亮的PPT效果。Marp支持在本地使用，也可以将Markdown文本上传至Marp网站在线编辑和预览。 2. Pandoc：一个通用的文档转换工具，支持将Markdown文本转换为多种格式，包括PPT、PDF、HTML等。使用Pandoc需要一些命令行操作，但是可以自定义转换格式和样式。 3. Reveal.js：一个基于HTML和CSS的演示工具，可以通过Markdown文本生成漂亮的PPT效果。Reveal.js支持多种主题和插件，可以自定义演示效果。使用Reveal.js需要一些前端知识。 使用以上工具可以轻松地将Markdown文本转换为PPT格式，方便演示和展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值