vb085@www:~$

Markdown 元素样例：代码、表格与图片

· #样例 · 3 min · /posts/markdown-sample/

这是一篇占位文章，专门用来验收排版：代码块、行内代码、表格、图片、 引用块都各来一份。正式文章就位后删掉即可。

配图

下面这张图是脚本生成的示例配图，验证图片自动带上宽高属性（防止加载时布局抖动）：

示例配图：渐变底上一行字

行内代码

在中文句子里嵌一段行内代码：运行 npm run build 之后产物在 dist/ 目录， 用 npx wrangler pages deploy dist 就能发上去。

代码块

一段 JavaScript：

// 检查构建产物里有没有引到第三方域名
import { readdir, readFile } from 'node:fs/promises';

const EXTERNAL = /https?:\/\//;

export async function findExternalRefs(dir) {
  const files = await readdir(dir, { recursive: true });
  const hits = [];
  for (const name of files.filter((f) => f.endsWith('.html'))) {
    const html = await readFile(`${dir}/${name}`, 'utf8');
    for (const match of html.matchAll(EXTERNAL)) {
      if (!match[0].includes('vb085.com')) hits.push({ name, url: match[0] });
    }
  }
  return hits;
}

一段 Bash：

# 本地起预览服务，手机连同一 Wi-Fi 用内网地址验收移动端排版
npm run build
npm run preview -- --host

表格

断点正文字号行高备注
移动端 ≤640px16px1.8单列，日期换行到标题下
桌面端 >640px17px1.8标题日期同一行右对齐

引用与其他

引用块长这样——左边一条主题色竖线：

好的中文网页排版，一半靠字体，一半靠克制。

列表也来一组：

  1. 构建：npm run build
  2. 预览：npm run preview
  3. 部署：等主人点头（见仓库里的 DEPLOY.md）

完。