排版样例:Markdown 各元素一览

排版样例:Markdown 各元素一览

J
Joy
2026年06月12日 · 1 分钟阅读

用于核对正文排版是否对齐 Minimal 的 markdown 组件风格。

这一段是普通正文,用来检查 加粗行内代码 以及链接的样式是否与 Minimal 一致。正文字号 16px、行高 1.5。

二级标题(Barlow 800)

段落之间保持 1.25rem 的下边距,整体竖向节奏与原 Minimal 的 styles.tsx 对齐。

三级标题

下面是无序与有序列表:

  • 第一项,列表行高为 2
  • 第二项,缩进 16px
  • 第三项
  1. 有序列表第一步
  2. 有序列表第二步

任务列表

  • 已完成的任务
  • 待办的任务

引用

设计的一致性,不是靠自律,而是靠把正确的选择变成默认值。

表格

方案渲染时机依赖
Minimal next-ts运行时react-markdown
本主题构建期Goldmark

代码块

行内代码如 const x = 1,代码块固定深色 + JetBrains Mono。代码块支持文件名标题栏{title="..."})与行高亮{hl_lines="..."}):

greet.jsjs
// Tomorrow Night Eighties 配色
function greet(name) {
  const greeting = `你好, ${name}`;
  console.log(greeting);
  return { ok: true, count: 42 };
}
.chip-soft {
  background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-primary-dark);
}

最后用一张图片收尾(点击可放大):

示例配图

提示框(notice shortcode)

Tip

这是一个 tip 提示框,支持 行内代码链接

Warning

带自定义标题的 warning 提示框。

Info

info 信息提示。

Danger

danger 危险警告。

图表(mermaid)

flowchart LR
  A[写作] --> B[构建] --> C[部署上线]

选项卡(tabs)

  • macOS
  • Linux

Homebrew 安装:brew install hugo

用包管理器或 go install 安装。

折叠面板(accordion)

点击展开:常见问题

这里是答案,支持 Markdown行内代码

按钮(button)

开始阅读 GitHub

图集(gallery)

分享

相关文章