SeraphinaGlacia's Blog

Markdown 扩展示例

Wed, 01 May 2024 00:00:00 GMT

这篇文章用于检查站点的 Markdown 扩展能力。它不是正式播客内容，而是保留在仓库中的语法样例，方便以后写文章时快速确认效果。

GitHub 仓库卡片

可以用一行 directive 生成 GitHub 仓库卡片。页面加载时，组件会读取 GitHub API 中的公开仓库信息。

::github{repo="Fabrizz/MMM-OnSpotify"}

写法如下：

::github{repo="saicaca/fuwari"}

提示块

当前支持 note、tip、important、warning、caution 几种提示类型。

:::note 这是补充说明。即使快速浏览，也应该留意这类信息。 :::

:::tip 这是技巧提示。它通常提供更顺手的操作方式。 :::

:::important 这是重要信息。它会影响读者是否能正确完成某个步骤。 :::

:::warning 这是警告信息。它提醒读者注意可能出现的风险。 :::

:::caution 这是谨慎提示。它通常说明某个操作可能带来的负面后果。 :::

基础写法

:::note
这是补充说明。
:::

:::tip
这是技巧提示。
:::

自定义标题

提示块也可以设置自定义标题。

:::note[自定义标题] 这是一个带自定义标题的 note。 :::

:::note[自定义标题]
这是一个带自定义标题的 note。
:::

GitHub 风格写法

[!TIP] 也可以使用 GitHub 风格的提示块语法。

> [!NOTE]
> 这是一条 note。

> [!TIP]
> 这是一条 tip。

隐藏文字

可以把一段文字折叠成 spoiler；其中仍然支持 Markdown 语法。

这段内容 :spoiler[默认会被隐藏 直到悬停查看]。

这段内容 :spoiler[默认会被隐藏 **直到悬停查看**]。

Expressive Code 示例

Wed, 10 Apr 2024 00:00:00 GMT

这里演示 Expressive Code 在当前站点中的显示效果。它适合用来展示代码、终端输出、diff、行高亮、折叠区块和行号。

语法高亮

普通代码块

console.log('这段代码会被语法高亮。')

ANSI 转义序列

ANSI 颜色：
- 普通：[31m红色[0m [32m绿色[0m [33m黄色[0m [34m蓝色[0m [35m洋红[0m [36m青色[0m
- 加粗：[1;31m红色[0m [1;32m绿色[0m [1;33m黄色[0m [1;34m蓝色[0m [1;35m洋红[0m [1;36m青色[0m
- 变暗：[2;31m红色[0m [2;32m绿色[0m [2;33m黄色[0m [2;34m蓝色[0m [2;35m洋红[0m [2;36m青色[0m

文本格式：[1m加粗[0m [2m变暗[0m [3m斜体[0m [4m下划线[0m

编辑器和终端边框

编辑器标题

console.log('这个代码块带有标题。')

<!-- src/content/index.html -->
<div>也可以通过文件名注释生成标题。</div>

终端边框

echo "这是一个没有标题的终端代码块"

Write-Output "这个终端代码块有标题。"

覆盖边框类型

echo "这个代码块不显示边框。"

function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本与行标记

标记整行或行范围

// 第 1 行会被标记
// 第 2 行
// 第 3 行
// 第 4 行会被标记
// 第 5 行
// 第 6 行
// 第 7 行和第 8 行会被标记
// 第 8 行

区分新增、删除和普通标记

function demo() {
  console.log('这一行会显示为删除')
  // 这一行和下一行会显示为新增
  console.log('这是第二行新增内容')

  return '这一行使用默认标记样式'
}

给行标记增加标签

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

diff 风格代码块

+这一行会显示为新增
-这一行会显示为删除
  这一行是普通内容

  function thisIsJavaScript() {
-   console.log('旧代码')
+   console.log('新代码')
  }

标记行内文本

function demo() {
  // 可以标记行内出现的给定文本
  return '多个给定文本也会被标记';
}

console.log('正则表达式会标记 yes 和 yep。')

echo "Test" > /home/test.txt

自动换行

为单个代码块开启换行

function getLongString() {
  return '这是一段很长很长的字符串，如果容器宽度不够，它会按照设置自动换行，避免撑破文章布局。'
}

function getLongString() {
  return '这段长字符串不会主动换行，适合检查横向滚动和代码块宽度。'
}

控制换行后的缩进

function getLongString() {
  return '开启 preserveIndent 时，换行后的缩进会尽量保持原来的代码结构。'
}

function getLongString() {
  return '关闭 preserveIndent 后，换行后的缩进不会继续跟随原始缩进。'
}

折叠区块

// 这些样板代码会默认折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// 这部分会默认展开
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // 一个代码块里可以有多个折叠区间
  const a = 1
  const b = 2
  const c = a + b

  // 这一行保持可见
  console.log(`计算结果：${a} + ${b} = ${c}`)
  return c
}

// 结尾的清理代码也会折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例代码结束' })

行号

为单个代码块显示行号

console.log('这段代码会显示行号。')
console.log('这一行在第 2 行。')

console.log('这段代码不会显示行号。')
console.log('适合短代码片段。')

修改起始行号

console.log('这一行显示为第 5 行。')
console.log('这一行显示为第 6 行。')

Fuwari 使用指南

Mon, 01 Apr 2024 00:00:00 GMT

封面图来源：Source

这个站点基于 Astro 和 Fuwari 模板构建。没有在这篇指南中覆盖的 Astro 问题，可以继续参考 Astro 文档。

文章 frontmatter

每篇文章都通过自己的 frontmatter 管理标题、发布时间、摘要、封面、标签、分类和草稿状态。写文章时只需要编辑当前 Markdown 文件，不需要改动动效或布局组件。

---
title: 我的第一期播客笔记
published: 2026-06-16
description: 这一期记录我正在思考的问题。
image: ./cover.jpg
tags: [播客, 记录]
category: Look ahead
draft: false
lang: ''
---

字段	说明
`title`	文章标题，会显示在首页、归档页和文章页。
`published`	发布时间。
`description`	文章摘要，会显示在首页卡片中。
`image`	文章封面路径。可以使用网络图片、`public` 目录中的绝对路径，或相对当前 Markdown 文件的本地路径。
`tags`	文章标签。
`category`	文章分类。
`draft`	是否为草稿；设为 `true` 时不会公开展示。
`lang`	文章语言；通常留空，默认跟随站点语言 `zh_CN`。

文章文件放在哪里

文章文件放在 src/content/posts/ 目录中。可以直接放一个 .md 文件，也可以为文章建立子目录，把封面和附件放在一起。

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

创建新文章时，可以运行：

pnpm new-post my-new-post

Markdown 基础示例

Sun, 01 Oct 2023 00:00:00 GMT

一级标题

段落之间用空行分隔。

第二段可以包含斜体、粗体和 等宽代码。无序列表如下：

第一项
第二项
第三项

这是引用块。

引用块可以包含多个段落，适合摘录、注释或补充说明。

中文标点、英文标点、数字和 Unicode 字符都可以正常显示。例如：长期记录、Look ahead、2026、☺。

二级标题

这是一个有序列表：

第一项
第二项
第三项

缩进代码块可以这样写：

# 这是缩进代码块
for i in 1 .. 10 { do-something(i) }

更推荐使用围栏代码块，复制和高亮都更稳定：

define foobar() {
    print "你好，Markdown!";
}

也可以声明语言，让代码块获得语法高亮：

import time

for i in range(10):
    time.sleep(0.5)
    print(i)

三级标题

嵌套列表示例如下：

先准备这些材料：
- 胡萝卜
- 芹菜
- 扁豆
烧一锅水。

把所有材料放进锅里，并按照这个过程处理：

 找到木勺
 打开锅盖
 搅拌
 盖上锅盖
 等待 10 分钟
 回到第一步，或者在完成后关火

注意不要碰掉木勺。

链接示例：Astro 官网、本地文档、跳转到二级标题。脚注示例见这里 ^1。

表格可以这样写：

尺码	材质	颜色
9	皮革	棕色
10	帆布	原色
11	玻璃	透明

上面的表格用于检查普通表格渲染效果。

水平分割线如下：

定义列表示例：

苹果 : 适合制作苹果酱。

橙子 : 一种柑橘类水果。

番茄 : 常见于沙拉、酱汁和汤。

行块示例：

| 第一行 | 第二行 | 第三行

图片可以这样引用：

![示例图片](./image.png "示例图片")

行内数学公式示例：$\omega = d\phi / dt$。展示型数学公式可以单独成段：

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

如果希望某些标点按字面显示，可以使用反斜杠转义，例如：`foo`、*bar*。

在文章中嵌入视频

Tue, 01 Aug 2023 00:00:00 GMT

在 Markdown 中嵌入视频时，可以从 YouTube、Bilibili 等平台复制 iframe 代码，然后直接粘贴到文章正文里。

---
title: 在文章中嵌入视频
published: 2023-10-19
# ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili