Blog

本站内容样式展示

一份可以阅读、复制和长期验收的内容样式图鉴，覆盖本站 Markdown、Liquid 与主题原生内容组件。

12 min read Site Guide

这不是孤立的设计稿，而是一篇走完整构建链路的文章。这里的文字、媒体、代码和脚注，都使用本站实际的共享模板、Markdown 解析器与主题组件。以后调整阅读样式，可以先回到这里检查，再进入博客、项目、Moments 和各类收藏内页核对真实内容。

阅读方式： 先看实际呈现，再展开每个示例的 View source 复制写法。桌面右侧目录可以跳转章节；窄屏按顺序阅读。图片可以点击放大，宽表格和长代码可以横向滚动。示例沿用已有像素城市素材，不另外加载图片素材库。

01 · 文字与标题

六级标题与章节层次

H1 · 城市的总览

H2 · 一次创造的起点

H3 · 从想法走向作品

H4 · 整理一个明确的步骤

H5 · 补充细节与阅读提示
H6 · 最轻的一层说明

标题的职责是组织内容，而不是替正文增加噪声。长标题也应自然换行：When a small idea becomes a working system, the details should remain readable on every screen.

View source 
# H1
## H2
### H3
#### H4
##### H5
###### H6

Setext 标题与显式锚点

另一种一级标题写法

另一种二级标题写法

跳回这一小节，或用显式 ID 给长期链接一个稳定的目标。

View source 
Section title
=============

Chapter title
-------------
{: #stable-anchor}

段落、强调与行内语义

清晨，像素城市的工作台已经亮起。一个好的个人网站，应该让真实的想法和作品走在前面。中文与 English 混排、数字 2026、标点和长链接，都需要共享稳定的阅读节奏。

粗体是重点，斜体是轻声补充，同时强调，划掉的旧计划，const color = "blue" 是行内代码。还可以使用 标记文本、Ctrl + K、一小段附注、H2O 与 x2。

“Make it colorful. Make it count.” 是一句提醒：让有趣的设计服务于值得阅读的内容。

View source 
**Strong** *Emphasis* ***Both*** ~~Deleted~~ `inline code`
<mark>Highlight</mark> <kbd>Ctrl</kbd> <small>Note</small> H<sub>2</sub>O x<sup>2</sup>

换行、转义与实体

第一行使用两个尾随空格。
第二行仍在同一段落里。
第三行使用 GFM 的反斜杠换行。

普通源码换行不会强制把句子拆开， 这一句应保持在同一段落。

转义后的 *星号*、#井号和 [方括号] 不会触发排版。实体可以写成 &、<、>、©、 。

View source 
First line.  
Second line.\
Third line.

\*Literal asterisks\* &amp; &lt; &copy;

项目入口是站内链接，Jekyll 官方文档是站外链接。引用式链接和省略式引用链接使用文末定义；自动链接为 https://kramdown.gettalong.org/，邮箱写法为 hello@example.com。

View source 
[Internal](/projects/)
[External](https://jekyllrb.com/docs/ "Title")
[Reference][docs]
<https://kramdown.gettalong.org/>
<hello@example.com>

[docs]: https://jekyllrb.com/docs/

缩写与行内属性

HTML 描述结构，CSS 描述呈现。可识别的缩写带有完整名称。

这句话里有一段 带有语言属性的 emphasis。属性列表还可以为段落指定已有语义样式，不必复制主题 CSS。

View source 
*[HTML]: HyperText Markup Language

HTML

*Emphasis*{: lang="en"}

智能引号与排印符号

“Colorful” 与 ‘small ideas’ 展示源码引号的排印转换。省略号 …、版权 (c)、注册标记 (r)、商标 (tm) 和正负号 +/- 由解析器处理。

View source 
"Colorful" 'small ideas' ... (c) (r) (tm) +/-

02 · 列表、引用与提示

无序、有序与嵌套列表

  • 收集一个值得动手的问题。
  • 写下清晰的边界。
    • 先考虑阅读顺序。
    • 再处理颜色、媒介和交互。
      • 最后检查小屏幕中的长文字。
  1. 阅读现有内容。
  2. 改进共享样式。
    1. 检查浅色模式。
    2. 检查深色模式。
  3. 回到真实文章中验证。

  • 包含多个段落的列表项。

    第二个段落依然属于这一项，留白应帮助读者理解层级。

    列表中也可以包含引用。

  • 下一个独立条目。

View source 
- Item
  - Nested item

1. First
2. Second

- A paragraph.

  Another paragraph in the same item.

任务清单

  • 建立真实文章蓝本。
  • 覆盖图片、代码和注脚。
  • 以后修改样式时重新检查这篇文章。
    • 浅色与深色都需要检查。
    • 在实际设备中确认触屏体验。

这是文档里的静态任务状态，不会把点击结果保存为个人待办。

View source 
- [x] Completed
- [ ] Pending
  - [x] Nested task

定义列表

设计 token
颜色、边框、间距与字体的共享来源。
修改它可以统一影响多种内容。
渐进增强
先保证内容可读，再在浏览器支持时增加视觉与交互细节。
View source 
Term
: Definition one.
: Definition two.

Another term
: Another definition.

多段引用与嵌套引用

让作品说话，也让阅读的过程舒服。

一段长引用应保留自然的行距。强调 核心观点 时，不需要把整个容器变成高亮色块。

内层引用用于补充上下文。它应该与外层的层级保持清楚。

Archer · Colorful reading notes

View source 
> A quotation.
>
> Another paragraph.
>
> > A nested quotation.
>
> <cite>Attribution</cite>

notice

一条普通提示：这是段落属性写法，不是另外引入的组件。

View source 
**A meaningful message.**
{: .notice}

notice–primary

主提示：一个值得记住的设计原则。

View source 
**A meaningful message.**
{: .notice--primary}

notice–info

信息：有些嵌入资源依赖第三方网络可达性。

View source 
**A meaningful message.**
{: .notice--info}

notice–success

成功：构建通过以后，再检查实际页面中的细节。

View source 
**A meaningful message.**
{: .notice--success}

notice–warning

注意：长表格和长代码可以横向滚动。

View source 
**A meaningful message.**
{: .notice--warning}

notice–danger

重要：调整样式时不要改变现有数据与业务逻辑。

View source 
**A meaningful message.**
{: .notice--danger}

多内容提示块

一段包含丰富内容的信息提示。

  • 提示块中的列表依然遵循正文的层级。
  • inline code 和 站内链接也能正常出现。

保持容器内部的文字与间距一致。

View source 
<div class="notice--info" markdown="1">
**Information**

- A list item.

> A quotation.
</div>

块结束标记与连续列表

  • 第一份独立列表。

  • 它到这里结束。

  • 第二份独立列表。
  • 不应与前一份合并。
View source 
- List one

^

- List two

03 · 表格与数据

对齐、长内容与行内样式

内容类型 对齐方式 数量
文章 居中说明 128
项目 structured data 16
阅读记录与一段会自然换行的较长描述 中文与 English 42

表头、斑马纹、数字与行内代码应该保持不同的阅读职责。

View source 
| Type | Status | Count |
| :--- | :---: | ---: |
| **Posts** | `ready` | 128 |

横向滚动与表格标题

Colorful content review matrix
Content familyReading templateLight appearanceDark appearanceKeyboard interactionTouch interactionMedia behavior
ArticlesShared reading columnTheme tokensTheme tokensTOC and copyScroll and tapLazy images and lightbox
ProjectsShared reading columnAmber accentsAmber accentsCarousel arrowsSwipe navigationProduct screenshot window
MomentsShared reading columnViolet accentsViolet accentsLightbox escapeImage navigationFront-matter gallery
View source 
<table>
<caption>A descriptive table title</caption>
<thead><tr><th>Column</th></tr></thead>
<tbody><tr><td>Value</td></tr></tbody>
</table>

引用里的 Markdown 表格

一张嵌套在引用中的表格，也应获得滚动容器。

检查对象 原则
引用中的表格 使用相同的主题边框
窄屏中的内容 不把整个页面撑宽
View source 
> | Item | Rule |
> | --- | --- |
> | Nested table | Scroll locally |

04 · 代码与终端

带语言的围栏代码

const world = { name: "Colorful", version: 2026 };
// A small idea becomes a working system.
function build(scene) {
  return `${scene.name}: ready to create`;
}
console.log(build(world));

from dataclasses import dataclass

@dataclass
class Scene:
    name: str
    ready: bool = True

print(Scene("Colorful"))
View source 
```javascript
const message = "Colorful";
console.log(message);
```

不指定语言的围栏代码

Colorful build report
  Content parsed
  Shared theme compiled
  Ready for visual review
View source 
```
Plain text without syntax highlighting.
```

缩进代码

下面的每行使用四个空格缩进：

bundle exec jekyll build
bundle exec jekyll serve
open http://localhost:4000/posts/content-style-showcase/
View source 
    bundle exec jekyll build
    bundle exec jekyll serve

Liquid 高亮与行号

1
2
3
4
5
6

const palette = ["writing", "projects", "reading"];
function describe(section) {
  // Line numbers must stay outside the copied source.
  return { section, theme: "Colorful" };
}
palette.map(describe);
View source 
{% highlight javascript linenos %}
const message = "Colorful";
console.log(message);
{% endhighlight %}

Liquid 高亮、不带行号

# Rendering is shared across collections.
sections = %w[posts projects book movie travel events ca]
sections.each { |section| puts "Review #{section}" }
View source 
{% highlight ruby %}
puts "Colorful"
{% endhighlight %}

多语言与长行

{
  "theme": "Colorful",
  "features": ["pixel city", "reading styles", "light and dark"],
  "description": "This intentionally long line checks that code scrolls inside its own frame without widening the article, shifting the table of contents, or hiding the copy button."
}

.reading-column {
  color: var(--c-text);
  background: var(--c-bg);
}

bundle exec jekyll build --destination /tmp/colorful-review

title: "本站内容样式展示"
toc: true
tags: [Colorful, Markdown, Theme]
View source 
```json
{"theme":"Colorful"}
```

```css
.reading-column { color: var(--c-text); }
```

原生 pre 与嵌套代码

Native pre/code block
A <tag> remains text, not markup.
A second line belongs to the same terminal frame.

引用里也可以放代码。

const keepReading = true;

  1. 在列表项中运行一个命令。

    bundle exec jekyll build
View source 
<pre><code>Native pre/code block
A &lt;tag&gt; remains text.</code></pre>

> ```javascript
> const keepReading = true;
> ```

指定代码行高亮

1
2
3
4

const scene = "Colorful";
const ready = true;
// This block highlights selected lines without changing the source.
console.log({ scene, ready });


scene = "Colorful"
print(scene)
View source 
{% highlight javascript linenos mark_lines="2 4" %}
const scene = "Colorful";
const ready = true;
// A comment.
console.log({ scene, ready });
{% endhighlight %}

波浪线围栏与代码定界

SELECT title, published_at
FROM articles
WHERE section = 'Colorful'
ORDER BY published_at DESC;

包含反引号的行内代码可以写成 const message = `Colorful`;。围栏的长度也可以增加，从而在代码里展示三重反引号。

View source 
~~~sql
SELECT title FROM articles;
~~~

``const message = `Colorful`;``

05 · 图片、Figure 与灯箱

Markdown 图片与引用式图片

Colorful city in daylight

Colorful city after dark

这两张图使用阅读区的真实懒加载占位。第一次接近视口时，应该先保留尺寸，再渐现图片。

View source 
![Alt text](/assets/images/hero/pixel-world-day-768.webp "Title")

![Alt text][city]
[city]: /assets/images/hero/pixel-world-night-768.webp

Explore the Colorful city

点击图片进入灯箱，按 Escape 或点击关闭按钮返回阅读。

View source 
[![Alt text](/assets/images/hero/pixel-world-day-768.webp)](/assets/images/hero/pixel-world-day-768.webp){: .image-popup}

Figure：标题与灯箱

Colorful city after dark
夜间创作。 图片说明也可以带有 Markdown 强调与 项目链接。
View source 
{% include figure popup=true image_path="/assets/images/hero/pixel-world-night-768.webp" alt="Colorful city after dark" caption="**Caption** with Markdown." %}

Figure：普通图片、不启用灯箱

The lower half of the Colorful city
城市的下半部分：这个 figure 没有设置 popup。
View source 
{% include figure image_path="/assets/images/hero/pixel-underworld-day.webp" alt="City" caption="A static figure." %}

图片对齐与浮动

Centered city

A small daylight scene

左浮动图片旁边的这段说明应环绕图片。一个页面不该只在大屏幕中漂亮：小屏幕需要恢复正常文档流，让图和文字依次排列。这段内容故意写得稍长，便于观察行距、宽度、段落间隔以及图片边缘和正文之间的关系。

A small night scene

右浮动使用相同的原则。文字保持自然宽度，图片不会把下一段挤到狭窄的位置。读者可以把浏览器缩窄，检查浮动如何恢复成单列。

Full-width city

View source 
![Alt](/assets/images/hero/pixel-world-day-768.webp){: .align-center}
![Alt](/assets/images/hero/pixel-world-day-768.webp){: .align-left width="220"}
![Alt](/assets/images/hero/pixel-world-night-768.webp){: .align-right width="220"}
![Alt](/assets/images/hero/pixel-underworld-day.webp){: .align-full}

原生 picture 与响应式来源

Colorful city selected by the device color preference

这个示例展示浏览器原生 picture 语法。这里的来源根据设备颜色偏好选择；它不是本站手动主题按钮的替代实现。

View source 
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="/assets/images/hero/pixel-world-night-768.webp">
  <img src="/assets/images/hero/pixel-world-day-768.webp" alt="City">
</picture>

06 · 相册与内容卡片

Colorful pixel city 1
像素城市相册：点击有链接的图片进入灯箱。
View source 
{% include gallery id="gallery_single" caption="像素城市相册：点击有链接的图片进入灯箱。" %}

# Front matter
gallery_single:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "Pixel city 1"
    url: /assets/images/hero/pixel-world-day-768.webp
    title: "Explore the city"
Colorful pixel city 1 Colorful pixel city 2
像素城市相册：点击有链接的图片进入灯箱。
View source 
{% include gallery id="gallery_pair" caption="像素城市相册：点击有链接的图片进入灯箱。" %}

# Front matter
gallery_pair:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "Pixel city 1"
    url: /assets/images/hero/pixel-world-day-768.webp
    title: "Explore the city"
  - image_path: /assets/images/hero/pixel-world-night-768.webp
    alt: "Pixel city 2"
    url: /assets/images/hero/pixel-world-night-768.webp
    title: "Explore the city"
Colorful pixel city 1 Colorful pixel city 2 Colorful pixel city 3
像素城市相册：点击有链接的图片进入灯箱。
View source 
{% include gallery  caption="像素城市相册：点击有链接的图片进入灯箱。" %}

# Front matter
gallery:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "Pixel city 1"
    url: /assets/images/hero/pixel-world-day-768.webp
    title: "Explore the city"
  - image_path: /assets/images/hero/pixel-world-night-768.webp
    alt: "Pixel city 2"
    url: /assets/images/hero/pixel-world-night-768.webp
    title: "Explore the city"
  - image_path: /assets/images/hero/pixel-underworld-day.webp
    alt: "Pixel city 3"
    url: /assets/images/hero/pixel-underworld-day.webp
    title: "Explore the city"
Colorful pixel city 1 Colorful pixel city 2 Colorful pixel city 3
像素城市相册：点击有链接的图片进入灯箱。
View source 
{% include gallery id="gallery" layout="half" caption="像素城市相册：点击有链接的图片进入灯箱。" %}

# Front matter
gallery:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "Pixel city 1"
    url: /assets/images/hero/pixel-world-day-768.webp
    title: "Explore the city"
  - image_path: /assets/images/hero/pixel-world-night-768.webp
    alt: "Pixel city 2"
    url: /assets/images/hero/pixel-world-night-768.webp
    title: "Explore the city"
  - image_path: /assets/images/hero/pixel-underworld-day.webp
    alt: "Pixel city 3"
    url: /assets/images/hero/pixel-underworld-day.webp
    title: "Explore the city"
Colorful pixel city 1 Colorful pixel city 2
像素城市相册：点击有链接的图片进入灯箱。
View source 
{% include gallery id="gallery_pair" layout="third" caption="像素城市相册：点击有链接的图片进入灯箱。" %}

# Front matter
gallery_pair:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "Pixel city 1"
    url: /assets/images/hero/pixel-world-day-768.webp
    title: "Explore the city"
  - image_path: /assets/images/hero/pixel-world-night-768.webp
    alt: "Pixel city 2"
    url: /assets/images/hero/pixel-world-night-768.webp
    title: "Explore the city"
Colorful pixel city 1 Colorful pixel city 2 Colorful pixel city 3
静态像素城市相册：此组没有图片链接，不启用灯箱。
View source 
{% include gallery id="gallery_unlinked" caption="静态像素城市相册：此组没有图片链接，不启用灯箱。" %}

# Front matter
gallery_unlinked:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "Pixel city 1"
  - image_path: /assets/images/hero/pixel-world-night-768.webp
    alt: "Pixel city 2"
  - image_path: /assets/images/hero/pixel-underworld-day.webp
    alt: "Pixel city 3"

默认 Feature row

Colorful city scene Scene 1

Build in daylight

A real scene from the Colorful world, with Markdown emphasis and a readable description that wraps naturally.

Explore projects

Colorful city scene Scene 2

Create after dark

A real scene from the Colorful world, with Markdown emphasis and a readable description that wraps naturally.

Explore projects

Colorful city scene Scene 3

Explore below the city

A real scene from the Colorful world, with Markdown emphasis and a readable description that wraps naturally.

Explore projects

View source 
{% include feature_row %}

# Front matter
feature_row:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "City"
    image_caption: "Daylight"
    title: "Build in daylight"
    excerpt: "A **Markdown** description."
    url: /projects/
    btn_label: "Explore projects"
    btn_class: "btn--primary"

Feature row：图片在左

Colorful city scene Scene 1

Build in daylight

A real scene from the Colorful world, with Markdown emphasis and a readable description that wraps naturally.

Explore projects

View source 
{% include feature_row id="feature_single" type="left" %}

# Front matter
feature_single:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "City"
    image_caption: "Daylight"
    title: "Build in daylight"
    excerpt: "A **Markdown** description."
    url: /projects/
    btn_label: "Explore projects"
    btn_class: "btn--primary"

Feature row：图片在右

Colorful city scene Scene 1

Build in daylight

A real scene from the Colorful world, with Markdown emphasis and a readable description that wraps naturally.

Explore projects

View source 
{% include feature_row id="feature_single" type="right" %}

# Front matter
feature_single:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "City"
    image_caption: "Daylight"
    title: "Build in daylight"
    excerpt: "A **Markdown** description."
    url: /projects/
    btn_label: "Explore projects"
    btn_class: "btn--primary"

Feature row：居中单项

Colorful city scene Scene 1

Build in daylight

A real scene from the Colorful world, with Markdown emphasis and a readable description that wraps naturally.

Explore projects

View source 
{% include feature_row id="feature_single" type="center" %}

# Front matter
feature_single:
  - image_path: /assets/images/hero/pixel-world-day-768.webp
    alt: "City"
    image_caption: "Daylight"
    title: "Build in daylight"
    excerpt: "A **Markdown** description."
    url: /projects/
    btn_label: "Explore projects"
    btn_class: "btn--primary"

集合原生媒体：宫格与项目截图

文章中的 gallery include 与集合的原生媒体不是同一个入口。Moments 使用 images（或单个 image）生成宫格灯箱；Projects 使用 previews 生成可左右切换的产品截图窗口。

它们受 page.collection 控制。这里保留真实入口，不通过伪造 collection 把文章变成一个项目。

View source 
---
# Moments document
images:
  - /assets/images/hero/pixel-world-day-768.webp
  - /assets/images/hero/pixel-world-night-768.webp
---

---
# Projects document
previews:
  - /assets/projects/ego-lite/preview-1.png
  - /assets/projects/ego-lite/preview-2.png
---

07 · 视频与外部嵌入

Bilibili 视频

此示例复用站内已有文章中的真实 Bilibili 视频。播放器能否加载取决于平台、浏览器策略与网络环境；页面本身应保留正确的 16:9 尺寸。

View source 
{% include video id="BV1a7411M7MD" provider="bilibili" danmaku=0 %}

{% include video id=page.header.video.id provider=page.header.video.provider danmaku=page.header.video.danmaku %}

另外三种视频 Provider

同一个 include 还支持 youtube、vimeo、google-drive。下列写法里的 id 必须替换为真实、可公开嵌入的资源 ID。本站没有现成的公开 Google Drive 视频，因此这里只保留准确写法，不制造失效播放器。

youtube 使用 youtube-nocookie，vimeo 带 dnt=true，google-drive 使用文件 preview。未知 provider 不输出播放器。

View source 
{% include video id="VIDEO_ID" provider="youtube" %}
{% include video id="VIDEO_ID" provider="vimeo" %}
{% include video id="PUBLIC_FILE_ID" provider="google-drive" %}

GitHub Gist 插件

jekyll-gist 已安装，支持整个 Gist 与指定文件两种写法。它在构建时尝试读取原始代码，在浏览器中加载 GitHub 脚本。这与本地 Rouge 高亮不同，受外部网络和第三方样式影响。

下面使用主题已有脚本曾引用的公开 gre/easing.js，实际执行已安装的插件。GitHub 不可达时仍可打开来源链接，其他本地代码示例不依赖它。

View source 
{% gist USER/GIST_ID %}
{% gist USER/GIST_ID filename.js %}
{% gist page.gist_id %}

08 · 脚注、披露与结构语法

脚注、重复引用与多段注释

阅读正文里的一个观点，可以带有简短注脚1。同一个注脚重复出现1，编号不应重新生成。另一个注脚包含多段内容与链接2。

View source 
A reference[^note], repeated[^note].

[^note]: Footnote text.

    A second paragraph.

原生 Details 披露块

为什么这篇文章要保留在站内？

它是一份可重复访问的验收内容，避免每次设计调整只检查一篇短文章。

  1. 先看共享样式。
  2. 再进入真实集合。
  3. 最后检查设备与交互。
const review = { light: true, dark: true };
默认展开的说明

open 属性让内容初始展开。键盘可以聚焦 summary，用 Enter 或 Space 切换。

View source 
<details markdown="1">
<summary>Read more</summary>

**Markdown content**
</details>

<details open><summary>Initially open</summary>Content</details>

分隔线与属性列表

第一段内容到这里结束。

三个连字符、星号或下划线都可以生成水平分隔线。

下面是利用块级属性列表生成的小号说明。

这是一段辅助文字，保持足够的对比度与自然换行。

View source 
---

***

___

A small note.
{: .small}

Liquid、缓存 Include 与数据读取

当前页面标题由真实 Liquid 读取：本站内容样式展示。本站名称为 Colorful。像素图标也可以使用已有缓存 include： 。

源码示例使用 raw 包裹，避免文档中的 Liquid 被二次执行。include_relative 用于相邻文件；post_url 与 link 用于构建期检查链接。

View source 
{{ page.title }}
{{ site.title }}
{% include_cached colorful/icon.html name="file-text" size=18 %}
{% link _posts/2015-10-21-flask-auth.markdown %}
{% post_url 2015-10-21-flask-auth %}

正文目录与可复用按钮

下面折叠块展示 Kramdown 自身的正文目录语法。文章右侧目录来自主题的 toc.html，两者是不同的生成入口。

View inline table of contents

Explore projects Read the blog

View source 
* Table of contents
{:toc}

[Explore projects](/projects/){: .c-btn .c-btn--primary}
[Read the blog](/posts/){: .c-btn}

命名属性列表与 HTML 解析开关

A reusable reading note with a named attribute definition.

**这段星号保留为原文，HTML 内部没有开启 Markdown 解析。**
View source 
{:reader-note: .small lang="en"}

A reusable reading note.
{: reader-note}

<div markdown="0">**Literal Markdown**</div>

Raw 扩展与解析器选项

Raw HTML 内容。 *这对星号不被解析为强调。*

上面的 options 扩展显式保留本站已有的自动标题 ID 设置。它属于作者语法，不是一个视觉组件。

View source 
{::nomarkdown}
<p><strong>Raw HTML</strong> *Literal asterisks*</p>
{:/nomarkdown}

{::options auto_ids="true" /}

行内与块级公式的语法边界

当前解析器的行内与块级公式都使用双美元符号。主题没有加载公式渲染器，因此这里只展示准确语法，不放一个看不见的公式节点充当成功示例。单个 $...$ 不是本站当前解析器的公式定界符。

View source 
Inline math: $$E = mc^2$$.

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

由 link 标签生成的原文章路径与由 post_url 生成的链接指向真实站内文章。源文件被移动或删除时，构建会报告问题。

include_relative 读取当前内容文件旁边的真实文件，不访问 _includes。本页没有为了演示而复制一份内容文件；下面保留它的准确签名。

View source 
[Post]({% link _posts/2015-10-21-flask-auth.markdown %})
[Post]({% post_url 2015-10-21-flask-auth %})
{% include_relative adjacent-content.md %}

解析器扩展与未启用能力

本站使用 Kramdown GFM，不是所有 Markdown 方言的并集。Kramdown 的扩展注释可以存在于源码而不进入正文。

数学公式的解析支持不等于公式可见渲染：当前主题没有加载 MathJax 或 KaTeX。Mermaid、自动 Emoji、提示块的 ::: callout 和 Obsidian [[wiki link]] 也没有相应主题渲染器。这里记录边界，不为了样式展示添加新的运行时库。

Feed、Sitemap 和分页插件生成站点级输出，不增加正文 Markdown 语法；它们应分别验收 /feed.xml、/sitemap.xml 和 博客分页。

View source 
{::comment}
An invisible editorial comment.
{:/comment}

# Not enabled as visual renderers:
# MathJax / KaTeX, Mermaid, wiki links, emoji plugin, ::: callouts

09 · 覆盖清单与维护约定

下表直接读取 _data/content_style_coverage.json，与构建验收脚本共享同一份清单。live 表示本页真实渲染；linked 表示集合特有能力，通过真实内页验收；syntax 表示已安装但需要真实外部资源的写法；documented 表示解析器或插件边界。

示例 来源 验收方式
六级标题与章节层次 Kramdown / GFM live
Setext 标题与显式锚点 Kramdown / GFM live
段落、强调与行内语义 Kramdown / GFM live
换行、转义与实体 Kramdown / GFM live
站内、站外与引用式链接 Kramdown / GFM live
缩写与行内属性 Kramdown / GFM live
智能引号与排印符号 Kramdown smart_quotes / typographic_syms live
无序、有序与嵌套列表 Kramdown / GFM live
任务清单 Kramdown / GFM live
定义列表 Kramdown / GFM live
多段引用与嵌套引用 Kramdown / GFM live
notice Theme notice classes live
notice–primary Theme notice classes live
notice–info Theme notice classes live
notice–success Theme notice classes live
notice–warning Theme notice classes live
notice–danger Theme notice classes live
多内容提示块 Kramdown HTML + theme notices live
块结束标记与连续列表 Kramdown eob_marker / blank_line live
对齐、长内容与行内样式 Kramdown / GFM live
横向滚动与表格标题 HTML table + theme scrolling live
引用里的 Markdown 表格 Kramdown / GFM live
带语言的围栏代码 GFM fences + Rouge live
不指定语言的围栏代码 GFM fences live
缩进代码 Kramdown / GFM live
Liquid 高亮与行号 Jekyll highlight + Rouge live
Liquid 高亮、不带行号 Jekyll highlight + Rouge live
多语言与长行 GFM fences + Rouge live
原生 pre 与嵌套代码 HTML + nested GFM live
指定代码行高亮 Jekyll highlight mark_lines + Rouge live
波浪线围栏与代码定界 GFM tilde fences + codespan live
Markdown 图片与引用式图片 Kramdown / GFM live
图片链接式灯箱 Markdown + theme lightbox live
Figure：标题与灯箱 _includes/figure live
Figure：普通图片、不启用灯箱 _includes/figure live
图片对齐与浮动 Kramdown IAL + theme alignment live
原生 picture 与响应式来源 HTML picture + reading_images live
单图相册 _includes/gallery live
双图相册：自动 half 布局 _includes/gallery live
多图相册：默认 gallery 与 third 布局 _includes/gallery live
显式 half 布局 _includes/gallery live
显式 third 布局 _includes/gallery live
不含链接的相册图片 _includes/gallery live
默认 Feature row _includes/feature_row live
Feature row：图片在左 _includes/feature_row live
Feature row：图片在右 _includes/feature_row live
Feature row：居中单项 _includes/feature_row live
集合原生媒体：宫格与项目截图 _layouts/colorful-page.html linked
Bilibili 视频 _includes/video live
另外三种视频 Provider _includes/video syntax
GitHub Gist 插件 jekyll-gist 1.5.0 live
脚注、重复引用与多段注释 Kramdown / GFM live
原生 Details 披露块 Native HTML + Kramdown live
分隔线与属性列表 Kramdown / GFM live
Liquid、缓存 Include 与数据读取 Jekyll Liquid + jekyll-include-cache live
正文目录与可复用按钮 Kramdown toc + theme buttons live
命名属性列表与 HTML 解析开关 Kramdown ALD / block_html live
Raw 扩展与解析器选项 Kramdown block_extensions / span_extensions live
行内与块级公式的语法边界 Kramdown inline_math / block_math syntax
构建期链接校验与相对 Include Jekyll link / post_url / include_relative live
解析器扩展与未启用能力 _config.yml + Gemfile + Kramdown documented

新增内容组件时，应同时补充本页、覆盖清单和验收条件。修改共享 CSS 后，检查 light / dark、窄屏、键盘、触屏、图片灯箱与代码复制；外部播放器与 Gist 单独报告实际网络结果，不把资源不可达误判为主题支持不存在。

  1. 阅读样式的目的，是让文字和结构都容易被理解。 ↩ ↩2

  2. 这是一条较长的注脚，带有 Jekyll 文档与 inline code。

    第二段继续补充上下文，读完以后可以通过回链返回正文。 ↩

#Colorful#Markdown#Theme

Keep reading

ai 《精读源码》- GoT 精读源码系列 - GoT Aug 7, 2024
javascript Javascript Sandbox 今天在整理以前的一些 Research，逐步搬运到博客上来，这篇是关于 Javascript Sandbox（Browser） Aug 4, 2024
沉思录 从编程范式及实时 Web 应用的另类角度看向 ChatGPT 的 AI 大脑 ChatGPT 是什么、它能做什么、甚至如果你想深入了解它的技术底层原理，那么，我相信此时此刻的你，在互联网的任何一个角落找到一篇 Paper 来快速了解它已经是一件非常容易的事情了，因为毫不夸张地说，它正在改变整个世界。 Mar 11, 2023

Comments