marp-tectonics/README.md

marp-tectonics

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

在其他幻灯片中使用

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

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

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

   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 目录带有一份示例

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

开放源代码协议

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