一级标题#

本文用于展示Fuwari博客的一些特性，段落之间是换行符分隔。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

常规文本，斜体，粗体，mono，下划线，~~删除线~~

无序列表
Foo
Bar

这是文本引用

引用可以多段

三个-表示分割线，两个-表示范围（1—5），三个.表示省略号（…）。

键盘元素 ctrl + s

1
<kbd>ctrl</kbd> + <kbd>s</kbd>

字体颜色

红色真实蓝色真实紫色真实金色真实绿色高亮

1
<font color=red>红色真实</font>
2
<font color=blue>蓝色真实</font>
3
<font color=purple>紫色真实</font>
4
<font color=yellow>金色真实</font>
5
<font color=green>绿色</font>
6
<mark>高亮</mark>

二级标题#

有序列表
Foo
Bar

代码示例

1
define foobar() {
2
    print "Welcome to flavor country!";
3
}

语法高亮代码块

1
import time
2
# Quick, count to ten!
3
for i in range(10):
4
    # (but not *too* quick)
5
    time.sleep(0.5)
6
    print i

diff 代码块

1
print('Hello')
2
print('World')

shield 徽章

三级标题#

嵌套列表

首先获取食材
- carrots
- celery
- lentils
烧水

把食材扔进锅里，按照以下算法

1
 find wooden spoon
2
 uncover pot
3
 stir
4
 cover pot
5
 balance wooden spoon precariously on pot handle
6
 wait 10 minutes
7
 goto first step (or shut off burner when done)

不要撞到木勺，否则它会掉下来。

超链接展示，外部网站，跳到一级标题。脚注¹。

行内公式 $\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*}

转义字符, ex.: `foo`, *bar*, etc.

图片

这是一张图片

扩展#

视频#

嵌入视频

Github 卡片#

您可以添加动态卡片，链接到 GitHub 仓库，页面加载时，仓库信息会从 GitHub API 获取。

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

saicaca

fuwari

Waiting for api.github.com...

00K

Waiting...

警告#

NOTE
突出显示用户即使在浏览时也应注意的信息。

TIP
可能有帮助的提示信息。

IMPORTANT
很重要的信息。

WARNING
需要注意。

CAUTION
警告信息。

基本语法#

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip
6
Optional information to help a user be more successful.
7
:::

自定义标题#

注意
这是一条自定义标题的注意。

1
:::note[注意]
2
这是一条自定义标题的注意。
3
:::

Github 语法#

TIP
Github 语法也是支持的。

1
> [!NOTE]
2
> Github 语法也是支持的。
3

4
> [!TIP]
5
> Github 语法也是支持的。

Expressive Code#

Fuwari 官方并没有支持 Expressive Code，这部分是 DIY 内容。

代码框和标题

1
console.log('Title attribute example')

在代码内注释也可以设置标题

1
<div>File name comment example</div>

代码折叠


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

行标记

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

指定行标记类型

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

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

给行标记添加标签

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

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

diff 语法

1
this line will be marked as inserted
2
this line will be marked as deleted
3
this is a regular line

raw diff

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

diff + 语法高亮

1
function thisIsJavaScript() {
2
  // This entire block gets highlighted as JavaScript,
3
  // and we can still add diff markers to it!
4
  console.log('Old code to be removed')
5
  console.log('New and shiny code!')
6
}

文本标记

1
function demo() {
2
  console.log('These are inserted and deleted marker types');
3
  // The return statement uses the default marker type
4
  return true;
5
}

渲染 ANSI 转义序列、终端标题

1
Standard ANSI colors:
2
- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
3
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
4
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
5
- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
6

7
8-bit colors (showing colors 160-171 as an example):
8
- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
9
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
10
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
11
- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 
12

13
24-bit colors (full RGB):
14
- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
15
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
16
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
17
- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
18

19
Font styles:
20
- Default
21
- Bold
22
- Dimmed
23
- Italic
24
- Underline
25
- Reversed
26
- Strikethrough

友情链接卡片组#

GitHub

全球最大的代码托管平台，开发者的聚集地

MDN Web Docs

Web开发者的权威文档和学习资源

Vue.js

渐进式JavaScript框架，易学易用

Astro

现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异现代静态网站生成器，性能优异

语法

1
:::friend-links
2
- name: 网站名称
3
  url: https://example.com
4
  avatar: https://example.com/avatar.png
5
  desc: 网站描述
6
- name: 另一个网站
7
  url: https://another.com
8
  avatar: https://another.com/logo.svg
9
  desc: 另一个网站的描述
10
:::

其他#

Email 保护联系邮箱

图片标题

有标题的图片

这是脚注 ↩

一级标题#

二级标题#

三级标题#

扩展#

视频#

Github 卡片#

警告#

基本语法#

自定义标题#

Github 语法#

Expressive Code#

友情链接卡片组#

其他#

Footnotes#