在 VS Code 中用 Marp Markdown 编写幻灯片

安装

❶ 下载 Visual Studio Code

❷ 安装插件 Marp for VS Code

Marp: Enable HTML

允许在 Marp 幻灯片预览中使用 HTML

❶ 打开设置 `Command + ,`

❷ 搜索 `marp`，勾选 `Marp: Enable HTML`

学习 Marp Markdown 语法

页眉页脚

全局

<!--header: 全局页眉-->
<!--footer: 全局页脚-->

单页

<!--_header: 单页页眉-->
<!--_footer: 单页页脚-->

Style

全局

style: |
    h1 {
        font-size: 3em;
        text-align: center;
    }

单页

<style scoped>
h1 {
    font-size: 3em; 
    text-align: center;
}
</style>

文字竖排

可以在 style 中添加下面的代码

h4 {
    writing-mode: vertical-lr;
    font-size: 1.5em;
    font-weight: bold;
    position: absolute;
    top: 2em;
    left: 0em;
}

分栏

Markdown 头部添加 style

◆

marp: true paginate: true style: | .columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

◆


</div><div>

### 分栏语句
```html
<div class="columns"><div>

Column 1

</div><div>

Column 2

</div></div>

隐藏列表项符号

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

添加 style

li {
    list-style-type: none
}

SVG 代码

<svg data-marpit-svg viewBox="0 0 1280 960">
  <foreignObject width="1280" height="960">
    <section><h1>Page 1</h1></section>
  </foreignObject>
</svg>
<svg data-marpit-svg viewBox="0 0 1280 960">
  <foreignObject width="1280" height="960">
    <section><h1>Page 2</h1></section>
  </foreignObject>
</svg>

flowchart TD;
    Kontrollstrukturen---Verzweigungen
    Kontrollstrukturen---Schleifen
    subgraph verz [ ]
        Verzweigungen---if[if-Anweisung]
        if---ifels[if-else-Anweisung]
        Verzweigungen---switch[switch-Anweisung]
    end
    Schleifen---while[while-Anweisung]
    Schleifen---dowhile[do-while-Anweisung]
    Schleifen---for[for-Anweisung]
    style verz fill:#00A17020,stroke:#00A17080,stroke-width:2px

%%{init: {'themeVariables': { 'fontSize': '22px'}}}%% flowchart LR; subgraph two direction LR A([Some node])-->B; B[Some other node]-->C; B-->D; C-->D; end subgraph one direction TB C1; C2; C3; end

C2-->A;