Marp 教程：如何在 VSCode 中引入自定义样式和主题

Marp 教程：如何在 VSCode 中引入自定义样式和主题

引言

Marp 是一个基于 Markdown 的幻灯片制作工具，结合 VSCode 的强大编辑功能，可以让你的 PPT 制作过程变得更加高效和专业。本文将详细介绍如何在 Marp 中引入自定义样式和主题，使你的幻灯片更加个性化和独特。

准备工作

1. 安装 VSCode 和 Marp 插件

如果你还没有安装 VSCode，可以从 Visual Studio Code 官网下载并安装。
在 VSCode 中安装 "Marp for VS Code" 插件。可以通过点击左侧活动栏上的扩展图标或按 Ctrl+Shift+X 打开扩展市场，搜索并安装。

2. 了解 Marp 的基本结构

Marp 使用 Markdown 语法来创建幻灯片，但它有几个特定的语法来控制幻灯片的布局和样式：

新幻灯片 ：在 Markdown 中使用 --- 来分隔不同的幻灯片。
标题：使用 # 表示幻灯片标题。
内容：正常的 Markdown 语法。

引入自定义样式

1. 创建自定义样式文件

首先，你需要创建一个 CSS 文件来定义你的自定义样式。例如，创建一个名为 custom-style.css 的文件：

css 复制代码

/* custom-style.css */
body {
    background-color: #f0f0f0; /* 设置背景颜色 */
}

h1 {
    color: #333; /* 设置标题颜色 */
    font-size: 36px; /* 设置标题字体大小 */
}

section {
    padding: 20px; /* 设置幻灯片内容的内边距 */
}

/* 自定义动画效果 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1s;
}

2. 在 Markdown 文件中引入自定义样式

在你的 Markdown 文件的头部（YAML 头信息）中，通过 style 字段引入你的自定义 CSS 文件：

markdown 复制代码

---
marp: true
style: custom-style.css
---

3. 放置样式文件

确保你的自定义样式文件放在 VSCode 工作区的根目录下，或者在 VSCode 设置中指定一个路径来查找这些文件：

json 复制代码

{
    "marp-cli.styleSet": [
        "./path/to/your/styles"
    ]
}

4. 应用动画效果

如果你在自定义样式中定义了动画效果，可以在 Markdown 中使用类名来应用这些效果：

markdown 复制代码

# 标题 {.fade-in}

创建和使用自定义主题

1. 创建自定义主题

如果你想创建一个完整的主题，可以参考 Marp 的官方主题结构。通常，一个主题包括：

CSS 文件：定义幻灯片的样式。
YAML 文件：定义主题的元数据，如名称、作者等。

例如，创建一个名为 my-theme 的主题：

my-theme.css：

css 复制代码

/* my-theme.css */
body {
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    font-size: 36px;
}

section {
    padding: 20px;
}

my-theme.yml：

yaml 复制代码

name: My Theme
author: Your Name
version: 1.0.0

2. 使用自定义主题

在 Markdown 文件中，通过 theme 字段引入你的自定义主题：

markdown 复制代码

---
marp: true
theme: my-theme
---

3. 放置主题文件

确保你的自定义主题文件放在 VSCode 工作区的根目录下，或者在 VSCode 设置中指定一个路径来查找这些文件：

json 复制代码

{
    "marp-cli.themeSet": [
        "./path/to/your/themes"
    ]
}

高级自定义

1. 自定义幻灯片布局

Marp 允许你通过 CSS 自定义幻灯片的布局。例如，你可以调整幻灯片的宽高比：

css 复制代码

/* 在 custom-style.css 中 */
section {
    width: 1600px;
    height: 900px;
}

2. 自定义字体

你可以引入自定义字体来增强幻灯片的视觉效果：

css 复制代码

/* 在 custom-style.css 中 */
@font-face {
    font-family: 'MyCustomFont';
    src: url('path/to/font.woff2') format('woff2');
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

3. 自定义动画

除了简单的淡入效果，你还可以定义更复杂的动画：

css 复制代码

/* 在 custom-style.css 中 */
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.slide-in {
    animation: slideInFromLeft 0.5s ease-out;
}

然后在 Markdown 中使用：

markdown 复制代码

# 标题 {.slide-in}

预览与调试

在 VSCode 中，你可以使用 Marp 的预览功能来实时查看你的自定义样式或主题的效果。按 Ctrl+Shift+V 或点击右上角的预览按钮来查看。

总结

通过本教程，你已经学会了如何在 Marp 中引入自定义样式和主题，使你的幻灯片更加个性化和专业化。Marp 结合 Markdown 的简洁性和 VSCode 的强大功能，使得 PPT 的制作变得更加直观和高效。继续探索 Marp 的更多功能，制作出更加精美的演示文稿吧！

注意：本教程假设你已经熟悉了基本的 Markdown 语法和 CSS。如果你对这些概念不熟悉，建议先学习相关基础知识。

参考资料：