Bind.pub
← 返回
ARTICLE··3 min read

Hello, Bind — Markdown 样式演示

#markdown#typography#演示#bind

欢迎来到 Bind 的「发现」栏目。这是首篇示例文章,用作验证 markdown 渲染样式 —— 标题、段落、列表、引用、代码、链接、图片、表格、任务列表、删除线、数学公式、脚注式段落 在 .prose-bind typography 规则下的实际效果。

段落与中英混排

正文段落,中英混排测试:Bind is a personal index of interesting corners of the web —— 个人导航 + 文章推荐,部署在 Cloudflare Pages,纯静态导出。

行内强调:这是加粗、这是斜体、这是删除线、这是行内代码,以及一个 外链示例。

中文长句换行测试:在做产品的过程中,我们经常会陷入这样一个误区——以为只要功能足够多、覆盖面足够广,用户就会留下来。但事实是,用户记住的从来都不是某个功能,而是某个让他们眼前一亮的瞬间。

标题层级

三级标题

继续测试行高与字号在三级标题下的视觉节奏。三级标题应比二级略小、间距略紧凑。

四级标题

四级标题字号与正文相当,但加粗以示区分。

五级标题

五级标题更小,用于深层结构。

六级标题(小字标签风格)

六级标题字号最小,大写字距加宽,用作小标签。

引用块

引用块的文字应该比正文略灰、略带斜体,左侧有 3px 的浅灰色实线。
多行引用也应保持一致的内部边距与字色。

嵌套引用:

一级引用:做产品就像写文章。

二级引用:写文章就像盖房子。

三级引用:盖房子就像做人。

列表

无序列表:

  • 第一项
  • 第二项
    • 嵌套项 A
    • 嵌套项 B
      • 三级嵌套
  • 第三项

有序列表:

  1. 第一步
  2. 第二步
  3. 第三步
    1. 子步骤 a
    2. 子步骤 b

任务列表(GFM):

  • 已完成的任务
  • 部署到 Cloudflare Pages
  • 接入 RSS 订阅
  • 加暗色模式

代码

行内代码:const greeting = "Hello, Bind"。

带语言标记的 TypeScript 代码块:

interface Article {
  slug: string;
  title: string;
  date: string;
  content: string;
  readingTime: number;
}
 
async function loadArticle(slug: string): Promise<Article | null> {
  const file = await readFile(`content/articles/${slug}.md`, 'utf8');
  if (!file) return null;
  return parseFrontmatter(file);
}
 
console.log(await loadArticle('hello-world'));

Python 代码块:

def estimate_reading_time(text: str) -> int:
    """按 350 中文字/分钟、200 英文词/分钟,取较大值,向上取整"""
    cn = sum(1 for ch in text if '一' <= ch <= '鿿')
    en = len([w for w in text.split() if w.isascii() and w.isalpha()])
    return max(1, math.ceil(max(cn / 350, en / 200)))

Bash 代码块:

# 构建并部署
npm run build && wrangler pages deploy out

不带语言标记的代码块:

plain text inside a fenced block
multi-line content
no syntax highlighting

表格(GFM)

维度 默认值 描述 是否可配置
字号 16px 文章正文字号 ✓
行高 1.75 段落行高 ✓
阅读宽度 65ch 正文最大宽度 ✓
卡片不透明度 85% 详情页正文容器 ✗
字体 HarmonyOS Sans 主字体栈 ✓

数学公式(KaTeX)

行内公式:勾股定理 a2+b2=c2a^2 + b^2 = c^2,以及欧拉恒等式 eiπ+1=0e^{i\pi} + 1 = 0。

块级公式:

∫−∞∞e−x2 dx=π\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

矩阵示例:

A=(123456789)A = \begin{pmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{pmatrix}

求和与极限:

lim⁡n→∞∑k=1n1k2=π26\lim_{n \to \infty} \sum_{k=1}^{n} \frac{1}{k^2} = \frac{\pi^2}{6}

图片

单图(项目本地真实风景图):

暗色山雾风景

带标题的图片:

夜空与星轨

自动链接(GFM)

裸 URL 会自动变成可点击链接:https://github.com 、 https://nextjs.org 。

邮箱也一样:hello@bind.pub 。

水平分隔线

水平分隔线之后的段落 —— 用于测试 <hr> 在长文中的视觉间隔。

综合演示

这一段同时混合了 加粗、斜体、代码、链接、删除线、行内公式 f(x)=ax2+bx+cf(x) = ax^2 + bx + c,以及一个引用:

"好的设计是显而易见的。伟大的设计是透明的。" —— Joe Sparano

最后一段:如果你能看到上面所有元素都格式正确、间距和谐、对比度足够,说明 .prose-bind 排版系统工作正常 ✨。