Markdown 全功能排版指南(示例)

这篇文章刻意塞进了博客支持的所有 Markdown 元素,一方面作为站长写作时的排版参考,另一方面用来验证各元素在浅色与深色模式下的显示效果。读完它,你就知道在这里能写什么、长什么样。

文本与行内元素#

正文支持粗体、斜体、删除线、链接与行内代码 npm run build。中英文混排时建议在词间留空格,例如「用 Astro 构建静态站点」,阅读起来更舒服。

列表#

无序列表可以嵌套:

• 前端
  • 框架:Astro、(曾经写过的)Vue
  • 样式:Tailwind CSS、原生 CSS 变量
• 后端
  • Cloudflare Workers
  • 偶尔写点 Node.js 脚本

有序列表:

1. 想清楚要表达什么
2. 列出提纲
3. 一口气写完初稿,再回头修
4. 发布

任务列表#

写多步骤操作时,任务列表很好用:

• 注册域名
• 搭建站点
• 配置 RSS 与 Sitemap
• 换上真实域名(等站长部署)

引用#

简洁是复杂的最高境界。

—— 通常被认为出自 Leonardo da Vinci

表格#

元素	用途	注意事项
表格	结构化对比	列不宜超过 4 列
代码块	命令与代码	记得标注语言
图片	示意图	建议标注宽高,避免布局跳动

表格较宽时可以横向滑动,不会把页面撑破。

代码块#

支持语法高亮与一键复制:

interface Post {
  title: string;
  pubDate: Date;
  tags: string[];
}

export function sortByDate(posts: Post[]): Post[] {
  return [...posts].sort((a, b) => b.pubDate.getTime() - a.pubDate.getTime());
}

无语言标注的代码块也能正常展示:

plain text block

图片#

图片自带圆角与细边框,并预留宽高,加载时不会出现布局跳动。

分隔线与结尾#

---

以上就是全部元素。写新文章时可以复制本文的源码当作模板。