本站 Markdown 语法食谱 · Fried pork 3102's blog

这篇文章的作用是当测试用例用。每次改渲染器，我都会打开发布一次，看所有组件是否还是正常的。

#基础排版

普通段落。加粗、斜体、粗斜体、~~删除线~~、高亮，行内代码 const x = 1，以及按键 <kbd>Ctrl</kbd> + <kbd>K</kbd>。

链接分两种：站内链接会正常跳转，外部链接会自动加 target="_blank" 和 rel="noopener"。

#列表

无序列表：

第一项
第二项，稍微长一点，用来测试换行时的缩进是否对齐，这句话我故意写得很长很长很长很长很长很长很长
第三项

有序列表：

打开终端
运行 node tools/build.mjs
检查 dist/ 目录

任务列表：

写渲染器
加目录
支持脚注
支持数学公式

#表格

功能	实现方式	状态
全文搜索	构建期生成 JSON 索引	✅ 已完成
评论	Pages Functions + KV	✅ 已完成
数学公式	KaTeX	⬜ 计划中
脚注	自己写	⬜ 计划中

表格内容比较长的时候会自动横向滚动，不会撑破布局。

#代码块

带语言标签和复制按钮：

javascript

class="tok-com">// 从 KV 读取并自增计数
export async function onRequestPost({ request, env }) {
  const { id } = await request.json();
  const key = class="tok-str">`view:${id}`;
  const count = (Number(await env.BLOG_KV.get(key)) || 0) + 1;
  await env.BLOG_KV.put(key, String(count), { expirationTtl: 60 * 60 * 24 * 365 });
  return Response.json({ count });
}

css

/* 网格背景 */
.bg-paper {
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
}

bash

# 本地预览
npx wrangler pages dev dist --kv BLOG_KV
# 部署
npx wrangler pages deploy dist --project-name stardust-notes

yaml

name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: node tools/build.mjs

#提示块

#引用

记忆是不可靠的。你以为你永远记得十九岁那个夏天的傍晚，其实三年前你就已经开始记不清了。

所以写下来。

#图片

单张图片会自动变成 <figure>，下面的说明文字来自 alt：

#分割线

分割线会渲染成一个带小星星的装饰分隔符，而不是一条单调的直线。

#特殊字符与安全

渲染器会转义 HTML，所以下面这些是安全地显示为文本的：

<script>alert('xss')</script> 以及 <div onclick="evil()">。

如果要真的嵌入 HTML 片段（比如一个 <details>），需要在空行包裹后单独成段：

点开看看（这是一个裸 HTML 块）

渲染器会把顶格的 HTML 块原样输出，所以你可以嵌入 iframe、video 等等。

#写作检查

标题层级从 ## 开始（# 留给文章标题）
代码块标注语言
图片都有 alt
外部链接无需特殊处理
摘要由 front-matter 的 summary 决定

写完保存，构建脚本会自动生成目录、阅读时长和封面。剩下的就是按下部署按钮。

#基础排版

#列表

#表格

#代码块

#提示块

#引用

#图片

#分割线

#特殊字符与安全

#写作检查

留言 — 条