Theme Playground
这是一个用于测试博客主题的页面。修改 CSS 后，可以通过这个页面快速检查各种元素的显示效果。
一级标题 H1
这是一级标题下面的正文内容。
二级标题 H2
这是二级标题下面的正文内容。
三级标题 H3
这是三级标题下面的正文内容。
四级标题 H4
这是四级标题下面的正文内容。
五级标题 H5
这是五级标题下面的正文内容。
六级标题 H6
这是六级标题下面的正文内容。
普通段落
这是一个普通段落。
这是第二个段落，用来测试段落之间的间距。
这一段包含一些常见格式：
- 粗体文字
- 斜体文字
- 粗斜体
删除线行内代码
超链接
普通链接：
长链接：
This is a much longer link to test wrapping behavior inside paragraphs
同一段中的多个链接：
你可以访问 GitHub、Wikipedia 或 OpenAI。
引用块
这是一个普通引用块。
第二行引用内容。
第三行引用内容。
嵌套引用
第一层引用
第二层引用
第三层引用
长引用测试
这是一个比较长的引用块，用来测试背景色、边框、内边距、行高以及引用块与正文之间的距离。
有些主题会让引用块显得过于拥挤，有些则会留出过大的空白区域。
调整主题时，这里通常能快速暴露问题。
无序列表
- 第一项
- 第二项
- 第三项
- 子项目 A
- 子项目 B
- 子项目 C
- 第四项
有序列表
- 第一项
- 第二项
- 第三项
- 子项目 A
- 子项目 B
- 第四项
连续列表测试
第一段文字。
- 列表项 A
- 列表项 B
- 列表项 C
第二段文字。
- 编号 A
- 编号 B
- 编号 C
第三段文字。
任务列表
- 已完成任务
- 未完成任务
- 另一个未完成任务
分割线
上面内容
下面内容
行内代码
这是一个包含 console.log("Hello World") 的段落。
这是另一个包含 SELECT * FROM posts 的段落。
代码块
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("Bear Blog");
:root {
--background-color: #fff;
--text-color: #222;
--link-color: #59256a;
--accent-color: #c5a56e;
}
<blockquote>
<p>Hello World</p>
</blockquote>
长代码块（横向滚动测试）
const veryLongVariableNameThatShouldForceHorizontalScrollingInsideTheCodeBlockWithoutBreakingTheEntirePageLayout = "This is intentionally long and should reveal overflow issues in your code block styling.";
表格
| 名称 | 类型 | 状态 |
|---|---|---|
| Apple | Fruit | Active |
| Carrot | Vegetable | Active |
| Potato | Vegetable | Archived |
宽表格测试
| Column A | Column B | Column C | Column D | Column E | Column F | Column G |
|---|---|---|---|---|---|---|
| Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data |
图片
图片 Caption 测试：这里可以观察图片和说明文字之间的距离。
混合内容
这是一个包含 粗体、斜体、代码 和 超链接 的复杂段落。
同时测试一下非常非常非常非常非常非常非常非常非常长的英文单词：
SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
以及一个超长网址：
https://this-is-a-very-long-url-used-only-for-testing-word-wrapping-and-overflow-behavior.example.com/some/really/long/path
中文排版测试
这是中文正文。
我想测试中文段落的行高、字间距和阅读体验。
在同一个段落中加入 English words、123456 数字以及 inline code。
英文排版测试
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The quick brown fox jumps over the lazy dog.
引用中的代码
我们有时候会这样写：
npm install或者：
npm run build
脚注测试
这是一个包含脚注的句子。1
这是另一个脚注。2
Emoji 测试
😀 😎 🚀 🐻 ✨ ❤️
最后一段
如果这一段看起来舒服，那么大部分正文样式应该已经没什么问题了。