markdown: mermaid+marp進階

1. mermaid：示意圖

vscode 中安裝 mermaid 插件以后，可以很容易地畫示意圖，例如：

```mermaid
graph LR;
	A -->B;
'''

上面最后一行應為```，顯示不了，所以用'''示意。效果如下：

還可以做出更多細致的效果，參考：https://blog.csdn.net/swinfans/article/details/89393853
可惜的是：
1）cnblogs 這個 editor.md 模式貌似不支持 mermaid; 2) marp 似乎也不兼容 mermaid。所以在這兩個環境中，我都得先用typora弄出流程圖，然后再截圖放進這兩個環境。

2. marp進階：

前些天寫了一篇隨筆，記錄 vscode + marp 如何寫 slides：https://www.cnblogs.com/luyi07/p/14736322.html
今天翻閱網上各種教程、尤其是 marpit 官網 https://marpit.marp.app/theme-css?id=tweak-style-through-markdown，解決了一些進階問題。

2.1 theme

theme是排版的核心，內置的有 default, gaia, uncover 主題，參考：https://github.com/marp-team/marp-core/tree/main/themes
在文件頭部指定 theme。

---
marp: true
theme: gaia
_class: invert
paginate: true
---

我試了一下，三種內置主題有以下特點：

• uncover: 每頁居中，首頁標題slightskyblue，首頁作者white
• gaia: 每頁居左，首頁難看需要重調
• default: 每頁的字似乎不能用 h1, h2, h3, h4, h5... 操控

所以最終我用了 gaia，加了點命令調了一下首頁排版。

2.2 style

如果對 theme 不滿意，可以自行調節排版，使用 style 命令

2.2.1 global style

如下調節全局排版，section 表示 slide 主體，h1 表示 1 級標題，h2 h3 h4 等類似。

<!-- Global style -->
<style>
section {
  background: black;
  color: white;
  font-size: 0.6cm;
}
h1 {
    color: white;
    font-size: 2cm;
}
h2 {
    color: yellow
}
h3 {
    color: green
}
h4 {
    color: blue
}
h5 {
    color: red
}
</style>

2.2.2 scoped style

如下調節局部排版，注意關鍵字 Scoped style 和 style scoped

<!-- Scoped style -->
<style scoped>
section {
  background: black;
}
h1 {
    color: lightskyblue;
    font-size: 2cm;
}
h3 {
    color: white
}
</style>

2.3 頁眉、頁腳、頁碼

貌似調節格式的命令都用 ，如果 xxx 是 header，就表示從該處往后的全局，如果是 _header，就表示局部一頁。其他估計類似用法。color 表示文字顏色。

<!-- _header: Outline -->
<!-- backgroundColor: white -->
<!-- color: black -->

2.4 圖片大小

如下加載本地圖片、調節圖片大小。還有其他更細節的選項，參考：https://marpit.marp.app/image-syntax

![width:20cm](./Fe52states.png)

如果需要圖片居中，可以參考如下局部 style 命令，指定 tex-align: center 即可。

<!-- Scoped style -->
<style scoped>
section {
  text-align: center
}
</style>

以下為一個例子：

3. 總結

• mermaid 可以畫從上到下，或從左到右的示意圖，可以用 typora 畫，然后截圖放進其他環境。
• vscode + marp 可以做 markdown 風格的 slides，找到了一些調節細節的語法。以后有空可以自己定制一個 theme，或者自己做一個css文件。