# marp-tectonics

克制、锐利、适于规模作图的科研汇报用 marp 主题, 专为高信息熵、层级突出和印刷品风格设计, 并带有若干排版辅助扩展语法.

## 在其他幻灯片中使用

1. 在 `marp.config.mjs` 里把主题目录注册进来:

   ```js
   export default {
     themeSet: ['../tectonics/theme'],
     allowLocalFiles: true,
   }
   ```

2. 在 frontmatter 里选中主题、声明画幅:

   ```yaml
   theme: tectonics
   size: 16:9   # 或 4:3, 主题两种都适配
   ```

3. 构建:`marp --html -o deck.html deck.md`

主题的元数据里同时声明了 `@size 16:9 1280px 720px` 和 `@size 4:3 960px 720px`

## 扩展语法

| 语法 | 效果 |
| :--- | :--- |
| `<!-- _class: cover -->` + 四行文字(小字/`##` 主标题/学院+姓名/日期) | 封面: 通栏色带 + 居中三行 |
| `<!-- _class: toc -->` + `## 报告内容` + 有序列表 | 目录页: 左侧大字标题 + 竖线 + 右侧「一、二、…」 |
| `<!-- _class: cols -->` + 用 `<div>` 包住的两栏内容 | 左右两栏, 其余元素整行 |
| `<!-- _class: steps -->` + `## 一、…` + 有序列表 | 章节页: 蓝底白字 01/02/… 编号条 |
| `<!-- header: 章名 -->` | 右上角页眉, 从这页起一直生效(封面/章节页自动不显示) |
| `<p class="point">…</p>` / `<p class="key">…</p>` | 整段红色居中 / 主色蓝居中 |
| `<span class="red">…</span>` / `<span class="blue">…</span>` | 行内改色 |
| `<p class="caption">…</p>` | 图片说明的小灰字 |
| `<div class="tight">…</div>` / `<div class="tighter">…</div>` | 内容偏多时整块缩到 0.85em / 0.78em |
| `<div class="mid">…</div>` / `<div class="bottom">…</div>` | 块内水平居中 / 在正文页里靠底 |
| `<div class="flow">` + `.flow-box`(可加 `is-bad` / `is-good`) + `.flow-arrow` | 纯 CSS 的简易流程图 |
| ` ```mermaid ` 代码块 | 构建时渲染成内联 SVG(需挂 `tools/marp-mermaid-engine.mjs`) |

## 可调参数

- `--tectonics-accent` 主色(默认 `#004e98`, 取自 `design.1.png`), `--tectonics-red` 强调红
- `--tectonics-sans` / `--tectonics-serif` 标题与正文字体
- `--tectonics-title-size` / `--tectonics-title-rule` 页标题字号与下方细线
- `--toc-*`(目录页位置与字号)、`--step-*`(章节编号条尺寸)按画幅各自一组

## 示例与构建

example 目录带有一份示例

```sh
marp --html -o pre.html pre.md   # 重新生成示例
```

## 开放源代码协议

该主题在 MIT 协议的约束下开放源代码(vendor 下引用的第三方代码遵循它们自己的协议), 欢迎发起拉取请求并贡献改进.