Fuwari Modified

Markdown 扩展功能

Wed, 01 May 2024 00:00:00 GMT

GitHub 仓库卡片

使用仓库卡片展示 GitHub 项目。页面载入时，组件会尝试从 GitHub API 获取仓库信息。

::github{repo="github/github-mcp-server"}

语法为 ::github{repo="<所有者>/<仓库名>"}：

::github{repo="ANcRyel/fuwari-modified"}

提示框

支持以下提示框类型：note（说明）、tip（提示）、important（重要）、warning（警告）和 caution（注意）。

:::note 即使快速浏览文章，也值得留意这条补充说明。 :::

:::tip 一个能让操作更顺利的小技巧。 :::

:::important 完成这项操作前，请确认必要条件都已满足。 :::

:::warning 修改站点配置后，建议先运行 pnpm check，确认没有引入错误。 :::

:::caution 删除文章或静态资源前，请确认没有其他页面依赖它们。 :::

基本语法

:::note
这是一条说明。
:::

:::tip
这是一条提示。
:::

自定义标题

可以为提示框设置自定义标题。

:::note[写作建议] 把一篇文章聚焦在一个主题上，读起来会更清晰。 :::

:::note[写作建议]
把一篇文章聚焦在一个主题上，读起来会更清晰。
:::

GitHub 提示框语法

[!TIP] 也支持 GitHub 风格的提示框语法。

> [!NOTE]
> 也支持 GitHub 风格的提示框语法。

> [!TIP]
> 也支持 GitHub 风格的提示框语法。

剧透文本

可以将部分内容折叠为剧透文本，内部也支持 Markdown 格式。

隐藏内容在这里：:spoiler[这段文字默认会被隐藏]。

隐藏内容在这里：:spoiler[这段文字默认会被隐藏]。

Expressive Code 示例

Wed, 10 Apr 2024 00:00:00 GMT

本文展示本站通过 Expressive Code 呈现代码块的效果。更多配置细节可参阅其官方文档。

代码块样式

语法高亮

语法高亮文档

常规语法高亮

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

256 色（展示 160-177）：
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

完整 RGB 颜色：
[38;2;34;139;34m森林绿 - RGB(34, 139, 34)[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

文本与行标记

文本与行标记文档

标记指定行与行范围

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

选择行标记类型（mark、ins、del）

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

为行标记添加说明

// 行标记说明示例.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

将较长说明单独显示

// 行标记说明示例.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

使用 diff 风格语法

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

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+这是一个实际的 diff 文件
-所有内容保持不变
 空格也不会被移除

组合语法高亮与 diff 标记

  function thisIsJavaScript() {
    // 整个代码块会按 JavaScript 高亮，
    // 同时也可以添加 diff 标记！
  -   console.log('即将删除的旧代码')
  +   console.log('新增的代码')
  }

标记行内文本

function demo() {
  // 可以标记行内任意文本
  return '同一文本可以匹配多处';
}

正则表达式标记

console.log('yes 和 yep 这两个单词会被标记。')

转义正斜杠

echo "测试" > /home/test.txt

选择行内标记类型（mark、ins、del）

function demo() {
  console.log('此处演示新增与删除两种标记类型');
  // return 语句使用默认标记类型
  return true;
}

自动换行

自动换行文档

为代码块设置自动换行

// 启用自动换行的示例
function getLongString() {
  return '这确实是一段篇幅相当长、字数颇为可观、整体内容也显得比较长、看起来并不短的文本；在当前所处容器的宽度还没有达到足够宽、尚未扩展到足以将整段文字全部容纳下来的程度之前，它极有可能没有办法在同一行之中完整无缺地、毫无遗漏地、一个字符都不少地显示出来。'
}

// 禁用自动换行的示例
function getLongString() {
  return '这确实是一段篇幅相当长、字数颇为可观、整体内容也显得比较长、看起来并不短的文本；在当前所处容器的宽度还没有达到足够宽、尚未扩展到足以将整段文字全部容纳下来的程度之前，它极有可能没有办法在同一行之中完整无缺地、毫无遗漏地、一个字符都不少地显示出来。'
}

设置换行后的缩进

// preserveIndent 示例（默认启用）
function getLongString() {
  return '这确实是一段篇幅相当长、字数颇为可观、整体内容也显得比较长、看起来并不短的文本；在当前所处容器的宽度还没有达到足够宽、尚未扩展到足以将整段文字全部容纳下来的程度之前，它极有可能没有办法在同一行之中完整无缺地、毫无遗漏地、一个字符都不少地显示出来。'
}

// 禁用 preserveIndent 的示例
function getLongString() {
  return '这确实是一段篇幅相当长、字数颇为可观、整体内容也显得比较长、看起来并不短的文本；在当前所处容器的宽度还没有达到足够宽、尚未扩展到足以将整段文字全部容纳下来的程度之前，它极有可能没有办法在同一行之中完整无缺地、毫无遗漏地、一个字符都不少地显示出来。'
}

可折叠代码段

可折叠代码段文档

// 这部分初始化样板代码会被折叠
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: 'End of example boilerplate code' })

行号

行号插件文档

为代码块显示行号

// 此代码块将显示行号
console.log('你好，我位于第 2 行！')
console.log('我位于第 3 行')

// 此代码块不显示行号
console.log('你好？')
console.log('请问你知道我位于哪一行吗？')

修改起始行号

console.log('你好，我位于第 5 行！')
console.log('我位于第 6 行')

Fuwari Modified 简易指南

Mon, 01 Apr 2024 00:00:00 GMT

封面图来源：来源

本站基于 Fuwari 修改，使用 Astro 构建。项目源码和定制内容可在 GitHub 仓库查看；有关 Astro 的更多信息，请参阅 Astro 文档。

文章 Frontmatter

---
title: 我的第一篇博客文章
published: 2026-09-30
description: 这是我新 Astro 博客的第一篇文章。
image: ./cover.jpg
tags: [示例, 占位]
category: 随笔
draft: false
---

字段	说明
`title`	文章标题，必填。
`published`	发布日期，必填。
`updated`	更新日期，可选。
`description`	文章摘要，会显示在文章列表中。
`image`	封面图片。填写网络图片 URL、`public` 目录下以 `/` 开头的路径，或相对于 `content/posts` 的路径。
`tags`	标签列表，例如 `[示例, 占位]`。
`category`	文章分类。
`draft`	是否为草稿；设为 `true` 时文章不会公开显示。
`lang`	文章语言标识，可选。

文章文件放在哪里

文章保存在 src/content/posts/，可使用子目录整理文章及其图片。目录中的 Markdown 文件会自动作为文章载入。

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

创建文章

在项目根目录运行以下命令，会在文章目录中创建带有基础 Frontmatter 的 Markdown 文件：

pnpm new-post 我的文章

本地预览和检查项目可使用：

pnpm dev
pnpm check
pnpm build

站点标题、语言、导航、个人资料和主题等设置位于 src/config.ts。新增文章字段的校验规则位于 src/content.config.ts。

Markdown 基础语法示例

Sun, 01 Oct 2023 00:00:00 GMT

一级标题

段落之间空一行即可分段。这里是第二句话，用来展示普通文本的排版效果。

文字可以设为斜体、粗体或 等宽代码。无序列表如下：

第一项
第二项
第三项

也可以在段落中使用分隔线、行内代码和链接等常见 Markdown 格式。

引用内容可以这样书写。

引用也可以包含多个段落，适合摘录资料或突出说明。

中文、标点和 Unicode 字符均可正常使用。示例：你好，Markdown！

二级标题

有序列表可以用来列出步骤：

在 src/content/posts/ 中新建 Markdown 文件。
填写标题、发布日期和文章内容。
运行 pnpm dev，在本地预览文章。

代码既可以缩进书写，也可以使用带语言标记的围栏代码块：

for index in range(1, 4):
    print(f"第 {index} 步")

三级标题

列表可以嵌套，展示更细的内容层级：

准备文章素材：
- 标题和摘要
- 正文与配图
编写并预览文章。
检查 Frontmatter，并确认文章不是草稿。

链接可以指向项目仓库、本地指南或本文的二级标题。

表格

GitHub 风格的 Markdown 表格可用于整理简短信息：

命令	用途
`pnpm dev`	启动本地开发服务器。
`pnpm check`	检查 Astro 项目。
`pnpm build`	构建生产站点。

数学公式

行内公式可以写成 $\omega = d\phi / dt$。独立公式单独占一行，并用双美元符号包围：

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

$$ e^{i\pi} + 1 = 0 $$

在文章中嵌入视频

Tue, 01 Aug 2023 00:00:00 GMT

从 YouTube、哔哩哔哩等平台获取嵌入代码，粘贴到 Markdown 文件中即可。发布前请确认视频允许嵌入，并在不同屏幕尺寸下检查显示效果。

---
title: 在文章中嵌入视频
published: 2026-09-30
// ...
---

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

YouTube 示例

哔哩哔哩示例