Markdown 渲染效果展示

#文本样式

这是一段普通文本，包含粗体文字、斜体文字、_粗斜体_以及 行内代码、删除线文字、高亮文字、Ctrl + K 键盘快捷键。

下面是一个脚注示例 ¹。

此外，还支持行内剧透文本，使用 :spoiler[隐藏文字] 语法。将鼠标悬停在这段文字上即可看到 被隐藏的内容。适合在句子中间隐藏关键信息。

#标题层级

这里展示二级到六级标题的锚点效果。

三级标题

四级标题

五级标题

六级标题

#列表

无序列表

• 第一项
• 第二项
  • 嵌套子项 A
  • 嵌套子项 B
• 第三项

有序列表

1. 第一步
2. 第二步
   1. 子步骤 2.1
   2. 子步骤 2.2
3. 第三步

任务列表

• 已完成的任务
• 这也是已完成的任务
• 待完成的任务
• 另一个待完成的任务

定义列表

术语 : 对术语的定义描述。定义列表在标准 Markdown 和许多 Markdown 扩展中得到支持。

#引用块

这是一个普通的引用块。Linlog 是一个内容优先的 Astro 主题，强调阅读体验和排版克制。

引用块可以包含多个段落，以及粗体、斜体等行内格式。

VitePress 风格告警

可折叠告警

标题后跟 + 表示默认展开，跟 - 表示默认收起。

#表格

列对齐演示

#分割线

上面是内容。

下面是分割线之后的内容。

#链接

• 内部链接 — 回到首页
• 外部链接 — Astro 官网
• 带标题的外部链接

#代码

行内代码

在句子中使用 const x = 42; 这样的行内代码。配置键 siteConfig.name 和 themeConfig.mode 也会渲染为行内代码样式。

带标题的代码块

1
export const siteConfig = {
2
  name: 'Linlog',
3
  shortName: 'Narrow',
4
  description: '一个内容优先的 Astro 主题。',
5
  contentWidth: '56rem',
6
  author: {
7
    name: 'Your Name',
8
    avatar: '/images/avatar.webp',
9
  },
10
}

带高亮的代码块（行号标记）

1
type ColorMode = 'light' | 'dark' | 'auto';
2

3
// 高亮这一行
4
export function setMode(mode: ColorMode) {
5
  // 以下三行被高亮
6
  const isDark = mode === 'dark'
7
    || (mode === 'auto'
8
      && window.matchMedia('(prefers-color-scheme: dark)').matches);
9
  document.documentElement.classList.toggle('dark', isDark);
10
}

其他语言代码块

1
def greet(name: str) -> str:
2
    """返回问候语"""
3
    return f"Hello, {name}! Welcome to Linlog."
4

5
if __name__ == "__main__":
6
    print(greet("World"))

1
pnpm install
2
pnpm dev
3
pnpm build

1
{
2
  "name": "linlog",
3
  "version": "1.0.0",
4
  "scripts": {
5
    "dev": "astro dev",
6
    "build": "astro build",
7
    "preview": "astro preview"
8
  }
9
}

1
@import "tailwindcss";
2
@plugin "@tailwindcss/typography";
3

4
.prose {
5
  max-width: 65ch;
6
  color: var(--color-text);
7
}

1
<article class="prose">
2
  <h1>文章标题</h1>
3
  <p>这是一段文章内容，包含<strong>粗体</strong>和<em>斜体</em>。</p>
4
</article>

#Tabs 标签页

1
interface Post {
2
  title: string;
3
  pubDate: Date;
4
  tags: string[];
5
  draft: boolean;
6
}
7

8
const posts: Post[] = await getCollection('posts');
9
const published = posts.filter(p => !p.data.draft);

1
from dataclasses import dataclass
2
from datetime import date
3

4
@dataclass
5
class Post:
6
    title: str
7
    pub_date: date
8
    tags: list[str]
9
    draft: bool = False
10

11
published = [p for p in posts if not p.draft]

1
struct Post {
2
    title: String,
3
    pub_date: String,
4
    tags: Vec<String>,
5
    draft: bool,
6
}
7

8
let published: Vec<&Post> = posts
9
    .iter()
10
    .filter(|p| !p.draft)
11
    .collect();

#折叠面板

1
// 折叠面板中的代码块同样支持语法高亮
2
export const advancedConfig = {
3
  enableFeatureX: true,
4
  maxRetries: 3,
5
  timeout: 5000,
6
};

代码块行级折叠（Expressive Code）

除了上面的整块折叠面板，pluginCollapsibleSections 还能在单个代码块内部折叠指定行区间。在围栏 meta 里用 collapse={起始行-结束行} 指定，多个区间用逗号分隔。折叠区会收成一行 “N collapsed lines” 摘要，点击展开：

1
// 第 1 行 — 始终可见
2
const data = {
3
  id: 1001,
4 collapsed lines
4
  name: "demo",          // 折叠区开始：第 4 行
5
  active: true,
6
  tags: ["md"],
7
  version: "2.0.0",      // 折叠区结束：第 7 行
8
};
9
// 第 9 行 — 始终可见

上面这段的实际效果：第 4–7 行收起成一行摘要，点一下展开。这区别于 ::::folding{} 折叠面板（折叠任意内容块），它只折叠代码行，适合隐藏长文件里不重要的中间片段。

相关 meta：collapseStyle 可选 github（默认，<details> 展开）、collapsible-start / collapsible-end（向下 / 向上展开）；collapsePreserveIndent={false} 可关闭折叠摘要的缩进对齐。

#数学公式

行内公式

爱因斯坦质能方程：$E = mc^2$。勾股定理：$a^2 + b^2 = c^2$。欧拉恒等式：$e^{i\pi} + 1 = 0$。

块级公式

二次方程求根公式：

傅里叶变换：

矩阵表示：

多行公式：

#Mermaid 图表

流程图

时序图

类图

甘特图

#图片展示

单张图片

图片组（自动启用图库）

点击任意图片可以启动灯箱查看大图。

#视频嵌入

Bilibili 视频

YouTube 视频

#链接卡片

Astro 官网

Astro 是一个现代化的静态站点生成器，支持多种 UI 框架，默认输出零 JavaScript。

GitHub

全球最大的代码托管平台，数百万开发者在这里协作、构建和分享软件。

站内文章自动卡片（post 填文章 entry id，标题/描述/链接自动填充）：

Git 从诞生到设计理念

从 Linux 内核开发的危机讲起，理解 Git 的分布式设计哲学、核心优势，以及它与 SVN 等版本控制系统的本质区别

2026-05-13版本控制#Git#版本控制#入门教程

#总结

以上就是 Linlog 主题支持的所有 Markdown 和扩展功能。这些功能覆盖了技术写作和内容创作的常见需求：

渲染效果在浅色和深色模式下都能正常展示。