我的第一个Marp演示文稿【免费下载链接】marpThe entrance repository of Markdown presentation ecosystem项目地址: https://gitcode.com/gh_mirrors/mar/marp欢迎使用Marp Markdown演示文稿工具第二页内容Marp通过---分隔符实现幻灯片分页使用命令行将Markdown转换为演示文稿 bash # 生成HTML格式 marp presentation.md -o output.html # 生成PDF格式 marp presentation.md -o presentation.pdf # 生成PPTX格式 marp presentation.md -o slides.pptxVS Code集成开发体验对于开发者而言VS Code扩展提供了更流畅的编辑体验。安装Marp for VS Code扩展后你可以获得实时预览功能边写边看效果语法高亮和智能提示一键导出多种格式主题切换和样式预览Marp在VS Code中的集成环境支持实时预览和主题配置 掌握Marp指令系统从基础到进阶Marp的强大之处在于其灵活的指令系统让你能够精细控制每张幻灯片的表现形式。全局指令配置在Markdown文件开头使用YAML Front Matter或HTML注释定义全局设置--- marp: true theme: uncover title: 技术分享演示文稿 author: 开发者 paginate: true ---或者使用HTML注释语法!-- theme: gaia size: 16:9 math: katex --局部指令控制单页样式每张幻灯片都可以拥有独立的样式配置!-- backgroundColor: #f0f8ff -- !-- color: #333333 -- # 蓝色背景页面 这张幻灯片拥有浅蓝色背景和深色文字 --- !-- _backgroundColor: #fff0f0 -- !-- _color: #8b0000 -- # 红色背景页面 这张幻灯片使用红色背景且样式不会影响后续页面Marp指令系统支持全局和局部样式控制实现灵活的幻灯片设计实用指令详解指令类型常用指令功能描述示例全局指令theme设置整个演示文稿的主题theme: uncover全局指令style自定义CSS样式style: \| section { font-family: Arial; }局部指令backgroundColor设置单页背景颜色!-- backgroundColor: lightblue --局部指令backgroundImage设置背景图片!-- backgroundImage: url(bg.jpg) --局部指令paginate控制页码显示!-- paginate: true --局部指令header/footer设置页眉页脚内容!-- header: 技术分享 -- 高级功能与实战技巧数学公式支持Marp内置数学公式渲染支持适合技术文档和学术演示!-- math: katex -- # 数学公式示例 ## 行内公式 勾股定理$a^2 b^2 c^2$ ## 块级公式 $$ \int_{-\infty}^{\infty} e^{-x^2} dx \sqrt{\pi} $$代码高亮与片段展示技术演示中代码展示至关重要Marp提供了出色的代码支持# 代码演示技巧 ## 基础代码块 python def fibonacci(n): if n 1: return n return fibonacci(n-1) fibonacci(n-2) ## 带行号和高亮 javascript {.line-numbers highlight3-5} // 异步函数示例 async function fetchData(url) { try { const response await fetch(url); const data await response.json(); return data; } catch (error) { console.error(Fetch error:, error); } } 过渡动画与视觉效果Marp CLI支持自定义过渡效果提升演示视觉体验虽然Marp主要专注于内容呈现但通过CSS动画可以实现简单的过渡效果style keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } section { animation: fadeIn 0.5s ease-in-out; } /style # 带淡入效果的页面 通过CSS动画实现页面过渡 工作流优化与最佳实践项目化演示文稿管理对于经常需要制作演示文稿的团队建议采用以下项目结构presentations/ ├── shared/ │ ├── themes/ │ │ ├── custom.css │ │ └── variables.scss │ └── assets/ │ ├── logos/ │ └── diagrams/ ├── template.md ├── build.sh └── presentations/ ├── 2024-q1-review.md ├── tech-talk-ai.md └── product-launch.md自动化构建脚本创建自动化脚本简化构建流程#!/bin/bash # build.sh - 自动化构建脚本 INPUT_FILE$1 OUTPUT_DIR./dist # 创建输出目录 mkdir -p $OUTPUT_DIR # 生成所有格式 marp $INPUT_FILE -o $OUTPUT_DIR/$(basename $INPUT_FILE .md).html marp $INPUT_FILE -o $OUTPUT_DIR/$(basename $INPUT_FILE .md).pdf marp $INPUT_FILE -o $OUTPUT_DIR/$(basename $INPUT_FILE .md).pptx echo 构建完成输出文件在 $OUTPUT_DIR/版本控制与协作由于Marp演示文稿是纯文本文件非常适合使用Git进行版本控制# 典型的Git工作流 git add presentation.md git commit -m 更新技术分享演示文稿 git push origin main # 查看历史修改 git log --oneline -- presentation.md 企业级应用场景技术团队内部分享问题技术团队每周技术分享需要快速制作演示文稿但每次都要重新设计模板。解决方案创建团队共享的Marp主题模板/* shared/themes/tech-team.css */ section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-family: SF Mono, monospace; } h1 { font-size: 3.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } code { background: rgba(255,255,255,0.1); border-radius: 4px; padding: 2px 6px; }产品文档与培训材料需求产品文档需要同时具备可读性和演示性避免内容重复维护。实现使用同一份Markdown文件生成文档和演示文稿--- # 产品功能文档 marp: true theme: product-docs --- # {{产品名称}} API文档 ## 功能概述 本产品提供以下核心功能... !-- _class: api-detail -- ### API端点GET /users json { method: GET, path: /api/v1/users, description: 获取用户列表 }快速开始让我们通过一个示例了解如何使用...### 持续集成与自动化发布 将Marp集成到CI/CD流程中实现演示文稿的自动化生成 yaml # .github/workflows/build-presentations.yml name: Build Presentations on: push: paths: - presentations/** jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - uses: actions/setup-nodev3 with: node-version: 18 - run: npm install -g marp-team/marp-cli - run: | for file in presentations/*.md; do marp $file --output dist/$(basename $file .md).pdf marp $file --output dist/$(basename $file .md).html done - uses: actions/upload-artifactv3 with: name: presentations path: dist/ 性能优化与高级技巧资源优化策略图片优化使用WebP格式并合理压缩字体加载优先使用系统字体或Web安全字体CSS优化避免复杂选择器和过多动画懒加载对于大型演示文稿考虑分页加载主题开发与自定义创建自定义主题只需简单的CSS文件/* custom-theme.css */ /* 定义主题变量 */ :root { --primary-color: #2563eb; --secondary-color: #7c3aed; --text-color: #1f2937; } /* 基础页面样式 */ section { background: white; color: var(--text-color); font-family: Inter, -apple-system, sans-serif; padding: 80px; } /* 标题样式 */ h1 { color: var(--primary-color); font-size: 3.5em; margin-bottom: 0.5em; } /* 代码块样式 */ pre { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5em; } /* 引用样式 */ blockquote { border-left: 4px solid var(--secondary-color); padding-left: 1em; color: #64748b; }在Markdown中引用自定义主题--- theme: custom-theme style: | section.important { background: linear-gradient(135deg, #fef3c7, #fde68a); } --- # 使用自定义主题 内容将应用自定义样式 从入门到精通的进阶路径学习路线图初级阶段掌握基础Markdown语法和幻灯片分隔中级阶段熟练使用指令系统和主题配置高级阶段开发自定义主题和集成到工作流专家阶段贡献社区主题和开发插件常见问题解决方案问题1中文字体显示异常section { font-family: Noto Sans SC, Microsoft YaHei, sans-serif; }问题2导出PDF时样式丢失# 使用--allow-local-files参数 marp presentation.md --pdf --allow-local-files问题3多主题切换--- theme: default --- # 默认主题页面 --- !-- theme: uncover -- # 切换为uncover主题 --- !-- theme: gaia -- # 再次切换为gaia主题【免费下载链接】marpThe entrance repository of Markdown presentation ecosystem项目地址: https://gitcode.com/gh_mirrors/mar/marp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考