HTML Test

2026-10-304 min read

本文汇总 Commonplace 当前支持的写作格式。每个章节先展示渲染效果，再提供对应写法。文章标题、日期和阅读时长由系统自动生成。

标题

文内只用两级：h2 作章节、h3 作小节。文章题目本身已是 h1，正文里不要再出现。你现在看到的每个小标题就是 h2，下面这行是 h3：

这是一个小节标题

markupHTML

<h2>章节标题</h2>
<h3>小节标题</h3>

段落与行内格式

正文一个 p 一段，段间留空、首行不缩进。支持以下行内格式：加粗、斜体、~~删除线~~、行内代码 和示例链接。

markupHTML

<p><strong>加粗</strong>、<em>斜体</em>、<del>删除线</del>、
<code>行内代码</code> 与 <a href="https://example.com">示例链接</a>。</p>

列表

无序列表放彼此独立的并列信息，有序列表放有先后顺序的步骤；每条一到两行，尽量不嵌套：

无序列表：并列、彼此独立的信息；
每条保持一行，标点与正文一致。

有序列表：有先后顺序的步骤；
后一步依赖前一步时，用它。

markupHTML

<ul>
  <li>并列项；</li>
  <li>并列项。</li>
</ul>
<ol>
  <li>第一步；</li>
  <li>第二步。</li>
</ol>

代码块

代码放进 .code 容器：顶栏左边是文件名，右边是语言名。块内关键字包一层 .k 显示为主题色，注释包 .c 显示为灰色；行内代码不需要容器。下面这块本身就是一个代码块：

main.rsRust

let s = String::from("hi");  // 关键字有色，注释是灰的

markupHTML

<div class="code">
  <div class="code-head">
    <span class="file">main.rs</span><span class="lang">Rust</span>
  </div>
  <pre><code>……</code></pre>
</div>

引用

引用有两种用法：摘录别人的话（附来源），或单独突出一条自己的笔记。样式同为左侧一道主题色竖线，来源写在末行小字：

摘录的样子：别人的一句话，末行附上出处。

—— 示例来源

个人笔记的样子：只有一句话，不加来源。

markupHTML

<blockquote>
  <p>引用正文。</p>
  <p class="src">—— 来源（可选）</p>
</blockquote>

表格

少量对照信息用表格：表头小字灰色，行间只留横线：

格式	用途
h2 / h3	章节与小节
.code	代码块
blockquote	引用与笔记

markupHTML

<table>
  <thead><tr><th>表头</th><th>表头</th></tr></thead>
  <tbody><tr><td>单元格</td><td>单元格</td></tr></tbody>
</table>

图片

图片用 figure 包裹，自适应宽度并带圆角，图注写在 figcaption 里：

markupHTML

<figure>
  <img src="图片地址" alt="描述" />
  <figcaption>图注（可选）</figcaption>
</figure>

分隔线

章节之间需要硬切换时用一条 hr，一次一条，不要连用：

markupHTML

<hr />

← Writing