笔记本语法演示
这个站点在标准 Markdown 之外长出来的东西:页边批注、便利贴、相片、折页、红笔、视频与嵌入页面。每一段都是它自己的示例。
这一页把站点的自定义语法全部用一遍,源码就是说明书。它是一个“项目”,下面挂着一篇文档《原生 Markdown 的手绘重绘》,两者各有自己的 attachments/ 文件夹。完整写法见仓库里的 docs/SYNTAX.md。
页边
行内批注跟着句子走。 需要放多段内容时用块级批注:
脚注也进页边,编号和行内批注连续。
落在文字上的笔
荧光笔有四种颜色:默认色随配色变、绿、粉、黄。
红笔批改:把 关键词 圈出来,给 需要强调的句子 画波浪线,给 术语 加框,把 写错的地方 划掉。自测题的答案可以先 。
盖章:待验证、已复现、存疑。
贴在纸上的东西
展开看一份长清单
折页适合放不想一开始就占满屏幕的内容。
- 页边批注
- 便利贴
- 更多相片样式
步骤与时间线
- 在
src/markdown/directives.mjs登记一个名字和它的渲染函数。 - 在
src/styles/markdown.css写样式,后台预览样式会自动跟着生成。 - 在
public/admin/components.js加一个同名按钮,再到docs/SYNTAX.md补一段说明。 npm test会检查这三处是否对齐。
- 2026-09-21 页边批注和荧光笔改成 Markdown 指令,文章从此可以在后台编辑。
- 2026-09-22 附件跟着文章走,语法扩展成一个家族,这一页诞生。
版式
左边一栏。分栏在手机上会变回单栏,所以每栏放独立的段落最稳妥。
右边一栏。适合并排放两张图或两段对照的文字。
| 指令 | 位置 | 变体 |
|---|---|---|
:mark[] | 行内 | green / pink / yellow |
:pen[] | 行内 | circle / wavy / box / strike / hide |
:stamp[] | 行内 | red / blue / green |
:::postit | 段落 | tip / warn / info / question |
:::photos | 段落 | cols= / scatter |
::video | 独占一行 | src= / youtube= / bilibili=,loop |
::embed | 独占一行 | page= / snippet=,height= |
视频与嵌入
嵌入页面是附件里的一个文件夹,有自己的 index.html,站点只负责把它放进相框并同步配色。想看它的源码,打开 attachments/ik-arm/index.html。
📎 项目文档
原生 Markdown 的手绘重绘
不加任何新语法,标题、列表、引用、表格、代码块和分割线在这个站点上长什么样。