0%
🛠️ Projects

笔记本语法演示

这个站点在标准 Markdown 之外长出来的东西:页边批注、便利贴、相片、折页、红笔、视频与嵌入页面。每一段都是它自己的示例。

进行中
  • Astro
  • remark-directive
  • Sveltia CMS

这一页把站点的自定义语法全部用一遍,源码就是说明书。它是一个“项目”,下面挂着一篇文档《原生 Markdown 的手绘重绘》,两者各有自己的 attachments/ 文件夹。完整写法见仓库里的 docs/SYNTAX.md。

页边

行内批注跟着句子走。 需要放多段内容时用块级批注:

脚注也进页边,编号和行内批注连续。

落在文字上的笔

荧光笔有四种颜色:默认色随配色变、绿、粉、黄。

红笔批改:把 关键词 圈出来,给 需要强调的句子 画波浪线,给 术语 加框,把 写错的地方 划掉。自测题的答案可以先 。

盖章:待验证、已复现、存疑。

贴在纸上的东西

两连杆机械臂的草图
两连杆机械臂的草图
四足机器人
四足机器人
一本摊开的笔记本
一本摊开的笔记本
散落模式:倾斜角更大
散落模式:倾斜角更大
每张相片顶上都有一条胶带
每张相片顶上都有一条胶带
展开看一份长清单

折页适合放不想一开始就占满屏幕的内容。

  • 页边批注
  • 便利贴
  • 更多相片样式
remark-directive这套语法的解析器:一个冒号行内,两个冒号独占一行,三个冒号包住段落github.com

步骤与时间线

  1. 在 src/markdown/directives.mjs 登记一个名字和它的渲染函数。
  2. 在 src/styles/markdown.css 写样式,后台预览样式会自动跟着生成。
  3. 在 public/admin/components.js 加一个同名按钮,再到 docs/SYNTAX.md 补一段说明。
  4. npm test 会检查这三处是否对齐。
  1. 2026-09-21 页边批注和荧光笔改成 Markdown 指令,文章从此可以在后台编辑。
  2. 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=

视频与嵌入

附件里的视频文件:静音自动循环
▶ 播放 · YouTube
YouTube 示例:页面打开时不向站外发请求,点击封面后才加载播放器
一个交互演示:两连杆机械臂跟着指针做逆运动学,颜色随站点配色变化

片段:一段带 CSS 动画的 SVG,直接嵌进正文

嵌入页面是附件里的一个文件夹,有自己的 index.html,站点只负责把它放进相框并同步配色。想看它的源码,打开 attachments/ik-arm/index.html。

📎 项目文档

原生 Markdown 的手绘重绘

不加任何新语法,标题、列表、引用、表格、代码块和分割线在这个站点上长什么样。