前端文档【免费下载链接】marpThe entrance repository of Markdown presentation ecosystem项目地址https://gitcode.com/gh_mirrors/mar/marp点击查看免费下载MarpMarkdownPresentation Ecosystem是围绕用纯 Markdown 撰写演示文稿构建的完整生态。本仓库gh_mirrors/mar/marp是整个生态的入口仓库entrance repository承载着官方文档网站源码与全家族项目清单本文将以该仓库的README.md为骨架结合仓库内官方文档与历史公告系统讲解 Marp 生态的架构分层、各组件定位、安装方式、写作语法与版本演进要点。读完本文你将能理清 Marp / Marpit / Marp Core / Marp CLI / Marp for VS Code 之间的关系并掌握从安装到写出第一份幻灯片、再到导出 PDF/PPTX 的完整路径。一、一个入口仓库Marp 生态的分散式组织与单体应用不同Marp 生态刻意将项目分散到多个仓库让每个仓库聚焦于有限的职责范围。README.md开篇即说明Our project is spread over many repos in order to focus on a limited scope per repository.本仓库正是家族入口它一方面汇总了整个生态的项目地图另一方面把官方网站marp.app 可以看到这是一个典型的 monorepo 结构通过workspaces字段把website作为子工作区纳入管理website/package.json 则显示官方网站基于Next.js 13与 React 18 构建并以marp-team/marp-core作为依赖直接在站点内渲染幻灯片示例即文档中以marp标识的实时预览代码块。因此理解 Marp 的正确姿势是把它看作一张组件地图而不是单个工具。下面这张按功能分层的项目清单正是入口仓库的核心内容。二、生态架构分层Framework / Core / Apps / IntegrationsREADME.md用四张表格完整列出家族成员可归纳为四个层级层级项目定位Framework / CoreMarpit从 Markdown 生成幻灯片 deck 的瘦框架Framework / CoreMarp Core带实用特性与内置主题的 Marp 转换核心AppsMarp CLIMarp Core / Marpit 的命令行界面可导出 HTML、PDF、PPTX 与图片IntegrationsMarp for VS CodeVS Code 扩展提供 Marp Markdown 实时幻灯片预览此外还有一组已停止维护 / 不活跃的项目被收纳在折叠区块中基于 PWA 与 Preact 的Marp Web、为 React 提供的Marp React、为 Vue 提供的Marp Vue以及经典版 Marp 应用的原仓库其页面甚至被作者戏称为墓地。经典版 Marp 因维护已停止多年入口仓库明确建议用户迁移到 Marp Next 时代的工具链详见仓库内文章 The story of Marp Next。Marpit为 Markdown 幻灯片而生的瘦框架[Marpit 框架]是所有 Marp 工具的基座。它只做一件事把 Markdown 转换为仅由静态 HTML 与 CSS 构成的最小资产产出可通过 Chrome / Chromium 打印为 PDF。设计目标决定了它的取舍转换结果严格兼容CommonMark即使拿到普通 Markdown 编辑器里渲染也不会难看提供基于纯 CSS 的主题系统主题作者只需掌握 HTML 语义元素与 CSS无需接触构建工具或 Sass 等额外知识具备像 PowerPoint / Keynote 那样的像素级精确排版pixel-perfect slide system主题无需担心响应式布局带来的走样其独创的Inline SVG slide实验特性用内联 SVG 包裹每张幻灯片借此实现零 JavaScript 幻灯片并隔离高级特性注入的 DOM、避免破坏主题样式。Marpit 同时也是独立框架即使不是 Marp 用户也可以把它整合进自己的工具中或通过markdown-it插件扩展它的语法。Marp Core自带电池的转换核心Marp Core 被作者称为battery-included Marpit——它继承了 Marpit 的全部能力并补齐了开箱写作所需的实用功能详见 The story of Marp Next内置主题Default、Gaia 与 Uncover主题 CSS 位于上游 marp-core 仓库的themes目录Emoji 支持基于KaTeX的数学排版size全局指令选择 16:9 / 4:3 等幻灯片尺寸自动缩放特性!-- fit --拟合标题、代码块/公式块溢出自动缩小。Marp 官网上 Whats Marp? 一文把 Marp 的核心理念归纳为五点基于 CommonMark 的 Markdown保证跨编辑器兼容只在 CommonMark 之上做少量扩展、主题 CSS内容与样式分离社区设计可直接复用、优先保证跨格式渲染一致PDF / PPTX / HTML 三份产物观感一致、易于上手CLI 与 GUI 双通道、可插拔架构基于 Marpit 框架可接入 markdown-it 插件、自定义指令与主题集。Marp CLI命令行瑞士军刀Marp CLI 是 Marp Core / Marpit 的 CLI 界面被描述为 Marp 幻灯片的瑞士军刀典型能力包括导出 HTML、PDF、PPTX 与图片PNG 等--watch监听 Markdown 与主题文件的变更--preview打开演示预览窗口基于 Marpit 框架的完全可定制引擎支持插件。它还深度集成Bespoke.js能生成可直接用于演示的静态 HTML配合 Netlify 等托管服务甚至可以把幻灯片仓库变成提交即部署的 Git 工作流。Marp for VS Code编辑器集成Marp for VS Code 将 VS Code 的 Markdown 预览升级为幻灯片预览并围绕**指令directives**提供了完整的编辑体验详见仓库内文章 Marp for VS Code v1自动补全、语法高亮、悬停帮助与诊断例如提示theme指令指定了未被识别的主题名同时支持虚拟工作区远程仓库与 Workspace Trust 安全模型——在未受信任的工作区中导出命令、markdown.marp.themes自定义主题与markdown.marp.enableHtml会被限制。三、仓库内的官方网站/website 目录入口仓库把官方网站源码放在 website/ 下作为生态的文档中枢。其内容组织清晰introduction什么是 Marp、安装指南guide如何编写幻灯片、指令 Directives、主题 theme、标题分隔 heading-divider、拟合标题 fitting-header、分段列表 fragmented-list、图像语法 image-syntax、数学排版 math-typesettingtoolsMarp CLI、Marp for VS Codeblog官方团队发布的功能公告与生态演进史。对使用者来说这些文档就是生态的说明书对想要深入源码的人来说website/components 下的组件与 website/utils/markdown 中的解析/渲染管线如image-paragraph-to-figure.ts、marp-code-block.ts则展示了官方站点的实现细节。四、快速开始CLI 还是 VS Code 扩展官方 安装指南 给出了两种使用路径并附了一张对比表Marp for VS CodeMarp CLI编辑器VS Code任意编辑器实时预览有有导出方式点击导出命令行支持 Marp 插件不支持支持不确定用哪个不熟悉命令行就选 VS Code 扩展基础功能全部覆盖即使是 CLI 老手VS Code 的语法补全与实时预览对写作也很有帮助。而 Marp CLI 更适合用 Vim 等喜爱编辑器写作、批量处理、与其他工具通过管道/重定向组合、接入 CI、服务端转换、设置高级配置、在 Node.js 项目中使用、加载 Marp / Marpit / markdown-it 插件等场景。安装 Marp for VS Code安装 Visual Studio Code安装 Marp for VS Code 扩展新建并打开一个.md文件从编辑器操作栏的 Marp 图标中选择Toggle Marp feature for current Markdown命令会在文件 front-matter 中写入--- marp: true ---打开 VS Code Markdown 预览开始写作。安装 Marp CLIHomebrewmacOSbrew install marp-cliScoopWindowsscoop install marpNode.js 一次性转换无需安装Node.js 12 时可直接用npx完成一次性转换npx marp-team/marp-clilatest markdown.md安装到 Node 项目推荐作为开发依赖npm install --save-dev marp-team/marp-cli npx marp markdown.mdYarn 项目则对应yarn add --dev marp-team/marp-cli yarn exec markdown.md仓库文档中 Yarn 一例原文如此实践中 Yarn 会自动暴露本地依赖的二进制通常写作yarn marp markdown.md即可。独立二进制可从上游 Marp CLI 的 GitHub Release 页面下载最新独立二进制免 Node 环境。也可以把marp命令全局安装但官方不建议全局安装。Docker官方容器镜像marpteam/marp-cli托管于 Docker Hub自 v1.0.0 起支持 ARM64 架构镜像并允许通过MARP_USER环境变量显式指定容器的 UID/GID详见 Marpit v2, Marp Core v2, and Marp CLI v1。关于导出 PDF / PPTX 的依赖无论走哪条路径只要涉及导出 PDF / PPTX就需要本机装有 Chrome、Edge 或其他 Chromium 内核浏览器——Marp 通过打印渲染保证跨格式的一致性见 Whats Marp?。五、写作基础幻灯片分隔与扩展语法Marp 使用水平标尺horizontal ruler切分幻灯片。最常用的是---# Slide 1 Hello, world! --- # Slide 2 Marp splits slides in the deck by horizontal ruler.注意按 CommonMark 规范---分隔线前后可能需要空行如果不想要空行可以用下划线标尺___、星号标尺***或含空格的- - -来分隔幻灯片见 如何编写幻灯片。Marp 的语法以 CommonMark 为基础并叠加以下扩展多数继承自 Marp Core / GFM段落内换行自动转换为br /标签也允许直接书写br /在拟合标题中换行尤其有用部分不常见的列表标记*与1)具有特殊含义——分段列表fragmented listGFM 扩展URL 自动链接、Emoji 短代码markdown-it-emojitwemoji、删除线~~strike~~、代码块语法高亮highlight.js、表格出于安全考虑大多数 HTML 标签默认禁用默认仅放行style用于微调主题与br /需要全部 HTML 时必须在使用工具中显式开启。六、Directives控制幻灯片的统一入口Directives指令是 Marp 用来控制主题、页码、页眉页脚及其他幻灯片元素的核心扩展语法语法本身继承自 Marpit 框架各工具支持的指令集略有差异解析基于 YAML详见 Directives 指南。两种定义方式HTML 注释中定义!-- theme: default paginate: true --front matter文档开头、由成对虚线标尺包裹中定义--- theme: default paginate: true ---注意虚线标尺也用于切分幻灯片Marp 约定前两条虚线标尺表示 YAML front matter其后的虚线标尺才是换页符。提示front matter 等价于在第一页用 HTML 注释定义指令——如果编辑器不支持 front matter改用 HTML 注释同样安全。全局指令全局指令作用于整个 deck重复定义时取最后一次的值名称说明theme设置 deck 的主题名style指定用于微调主题的 CSSheadingDivider指定标题分隔选项size选择主题提供的幻灯片尺寸预设math选择数学排版的渲染库title设置 deck 标题author设置作者description设置描述keywords设置逗号分隔的关键词url设置 canonical URL用于 HTML 导出image设置 Open Graph 图片 URL用于 HTML 导出marp在 VS Code 中控制是否启用 Marp 功能局部指令局部指令作用于单张幻灯片名称说明paginate设为true时在幻灯片上显示页码header/footer指定幻灯片页眉 / 页脚内容class设置幻灯片元素section的 HTMLclass属性backgroundColor/backgroundImage/backgroundPosition/backgroundRepeat/backgroundSize设置幻灯片背景相关样式color设置幻灯片文字颜色继承机制除非当前页显式设置了某局部指令否则该页会继承上一页的局部指令值。例如在第 2 页用!-- backgroundColor: lightblue --设置背景色第 3 页同样继承为浅蓝色背景。作用域局部指令给指令名加下划线前缀_则只作用于当前页——它优先于继承值且不会被后续页面继承!-- color: red -- # Page 1 This page has red text. --- !-- _color: blue -- # Page 2 This page has blue text, specified by a scoped local directive. --- # Page 3 Go back to red text.下划线前缀可应用于任意局部指令。官方用一张示意图说明继承与作用域的关系页码、页眉页脚与重置页码!-- paginate: true --即可在右下角显示页码想让标题页不显示页码可以把paginate定义挪到第二页或用作用域指令_paginate: false覆盖页眉页脚通过header/footer指令添加内容支持行内 Markdown 格式化如**bold** _italic_、行内图片为保持 YAML 可解析建议用引号包裹重置将指令设为空字符串即可在 deck 中途清除页眉页脚例如header: 与footer: 。七、版本演进与兼容性要点了解生态当前状态的另一条线索是官方公告。仓库内 Marpit v2, Marp Core v2, and Marp CLI v1 记录了一次重要的版本里程碑三者同日发布大版本最大的原因是终止支持已 EOL 的 Node.js 10Marpit v2 起要求 Node.js 10Marp CLI v1 直接移除 Node 10 支持Marp Core v2 为 Gaia / Uncover 主题引入了 CSS 变量配色能力可能影响自定义样式幻灯片的观感并升级到 Marpit v2.0.0 与 PostCSS 8。对于从经典版 Marp迁移的用户The story of Marp Next 列出过一份值得留意的语法差异清单出于安全原因Marp Core 默认禁用白名单以外的 HTML 元素目前白名单仅含br指令由专为 MarpMarpit调优的 YAML 解析器解析局部指令前缀由*改为_全局指令不再需要$前缀page_number重命名为paginatetemplate由class指令取代prerender指令被移除幻灯片尺寸通过 Marp Core 提供的size全局指令选择16:9 / 4:3自定义尺寸请走主题 CSS背景图![bg]()默认不再套用滤镜需要时请用![bg opacity]()行内图片不再支持百分比缩放![50%]()改用width/w、height/h关键字如![width:300px]()![center]()不再生效可通过自定义样式如img[alt~center] { display: block; margin: auto; }实现居中。八、参与贡献与许可入口仓库同时是生态的协作枢纽Marp 及其子项目遵循 marp-team 的贡献指南README.md中给出了 CONTRIBUTING 链接社区讨论集中在官方 Discussion 论坛组织级与个人赞助商信息同样在入口仓库中维护。许可证方面Marp 团队的所有工具与相关库均采用MIT License本仓库的许可文本见 LICENSE。结语从README.md这张项目地图出发可以看到 Marp 生态的清晰分层Marpit提供最小化、可插拔的 Markdown→HTML 转换能力Marp Core补齐内置主题与实用语法Marp CLI与Marp for VS Code分别以命令行和编辑器两条路径覆盖日常写作与批量/CI 场景。想要继续深入入口仓库本身就是最好的起点——安装指南、指令指南、主题指南 以及官方历史公告都躺在 website/ 目录里随时可以继续查阅。赞分享前端文档【免费下载链接】marpThe entrance repository of Markdown presentation ecosystem项目地址https://gitcode.com/gh_mirrors/mar/marp点击查看免费下载相关推荐终极指南如何用Marp生态系统创建惊艳的Markdown演示文稿终极指南如何用Marp生态系统创建惊艳的Markdown演示文稿 Marp是一个革命性的Markdown演示文稿生态系统让你能够使用简单的Markdown语前端文档Marp基于Markdown的演示文稿生态系统深度解析Marp基于Markdown的演示文稿生态系统深度解析 Marp是一个革命性的开源项目它让使用纯Markdown语法创建专业演示文稿成为可能。作为Markd前端文档Marp-CLI v4.1.2 版本发布增强Markdown演示文稿工具链Marp CLI v4.1.2 版本发布增强Markdown演示文稿工具链 Marp CLI 是一个基于命令行的Markdown幻灯片制作工具它能够将MarCLI开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考