跳到正文

惊涛拍岸 · 阅读示例

本篇用于集中展示惊涛拍岸主题下的各类 Markdown 样式,便于对照调整。


一、多级标题

正文之前,先确认标题层级在深蓝底、灯塔光下的层次感。

三级标题示例

小节标题应清晰可辨,与正文拉开层级。

四级标题

再往下的层级用于内文分点。

五级标题

较少使用,但样式需一致。

六级标题

最小标题层级。


二、段落与强调

这是一段普通正文。惊涛拍岸主题下,主文字为深蓝灰,行高适中,便于长文阅读。可包含 粗体斜体行内代码 以及 小字说明

第二段用于测试段间距与两端对齐效果。若有多段连续出现,应保持视觉上的呼吸感,不显拥挤。


三、列表

无序列表

  • 灯塔在夜海中指引方向
  • 惊涛拍岸,浪花与礁石
  • 冷蓝与暖光形成对比

有序列表

  1. 首先确定阅读宽度与背景
  2. 其次设定主色与强调色
  3. 最后微调标题与代码块

嵌套列表

  • 外层项
    • 内层无序
    • 再一层
  • 另一外层
    1. 内层有序第一
    2. 内层有序第二

四、引用块

惊涛拍岸,卷起千堆雪。灯塔之光,在黑暗中为航船指明归途。
—— 主题意象


五、提示块(Admonition)

note

这是一条 Note 提示。惊涛拍岸主题下,提示块应有左侧色条与浅底,与正文区分。

tip

这是一条 Tip 提示。可用于操作建议、小技巧等,风格与 note 一致、色相可略作区分。

warning

警告类提示,用于需要特别注意的内容。


六、代码

行内可写 const x = 1theme--jingtao

代码块示例(语法高亮若未配置则仅为等宽背景):

function lighthouse() {
  const beam = "warm";
  return { light: beam, waves: "cold" };
}
lighthouse();
.theme--jingtao .jingtao-reading h1 {
  color: var(--jingtao-ink-strong);
  border-bottom: 2px solid rgba(37, 99, 168, 0.35);
}

七、表格

元素说明
背景惊涛拍岸.png 固定铺满
主色深蓝、海蓝、灯塔暖黄
正文区半透明白底 / 雾面玻璃感
按钮PDF / Demo / 代码包
主题场景风格
茶香氤氲苹果论茶色纸感
惊涛拍岸思想与光夜海灯塔
南屏晚风目录页晚风明月

八、分隔线与收尾

以上为惊涛拍岸主题的样式预览。若某类元素需要微调,可直接在 阅读样式—惊涛拍岸.css 中修改对应选择器。

感谢阅读。