2065 字
10 分钟
扩展语法
2025-08-25
浏览量:加载中...访问次数:加载中...

Markdown 扩展语法#

链接卡片#

1️⃣GitHub 仓库卡片#

saicaca
/
fuwari
Waiting for api.github.com...
00K
0K
0K
Waiting...

代码示例

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

2️⃣扩展卡片#

基本用法#

example.com
Loading...
Loading description...
::link-card{url="https://example.com"}

自定义标题和描述#

github.com
GitHub
代码托管平台
::link-card{url="https://github.com" title="GitHub" description="代码托管平台"}

带自定义图片#

vercel.com
Vercel
部署平台
Vercel
::link-card{url="https://vercel.com" title="Vercel" description="部署平台" image="https://eopageapi.2x.nz/pic?img=h"}

自定义图标#

github.com
GitHub
代码托管平台
::link-card{url="https://github.com" title="GitHub" description="代码托管平台" icon="https://github.com/favicon.ico"}

所有实现#

www.2x.nz
二叉树树
你往小腹下探探有棍你就倒倒有豆你就点点比网站好玩🥰
二叉树树
::link-card{url="https://www.2x.nz" title="二叉树树" description="你往小腹下探探有棍你就倒倒有豆你就点点比网站好玩🥰" icon="https://q2.qlogo.cn/headimg_dl?dst_uin=2726730791&spec=0" icon-size="48" image="https://eopageapi.2x.nz/pic?img=h"}

2. 警告/提示框(GFM Alerts)#

1️⃣Fuwari 默认语法支持#

NOTE

这是一条提示信息。

TIP

这是一条小技巧。

IMPORTANT

这是一条重要信息。

WARNING

这是一条警告信息。

CAUTION

这是一条注意信息。

代码示例

:::note
这是一条提示信息。
:::
:::tip
这是一条小技巧。
:::
:::important
这是一条重要信息。
:::
:::warning
这是一条警告信息。
:::
:::caution
这是一条注意信息。
:::

2️⃣Github 语法支持#

NOTE

这是一条提示信息。

TIP

这是一条小技巧。

WARNING

这是一条警告信息。

代码示例

> [!NOTE]
> 这是一条提示信息。
> [!TIP]
> 这是一条小技巧。
> [!WARNING]
> 这是一条警告信息。

3. 数学公式(KaTeX/MathJax 扩展)#

行内公式:E=mc2E = mc^2
块级公式:

ex2dx=π\int_{-\infty}^\infty e^{-x^2} \, dx = \sqrt{\pi}

代码示例

行内公式:$E = mc^2$
块级公式:
$$
\int_{-\infty}^\infty e^{-x^2} \, dx = \sqrt{\pi}
$$

4.Expressive Code代码支持#

1️⃣语法高亮#

常规语法高亮#

console.log('This code is syntax highlighted!')

代码示例

```js
console.log('This code is syntax highlighted!')
```

渲染 ANSI 转义序列#

Terminal window
Standard ANSI colors:
- Dimmed: Black Red Green Yellow Blue Magenta Cyan White
- Foreground: Black Red Green Yellow Blue Magenta Cyan White
- Background: Black Red Green Yellow Blue Magenta Cyan White
- Reversed: Black Red Green Yellow Blue Magenta Cyan White
8-bit colors (showing colors 160-171 as an example):
- Dimmed: 160 161 162 163 164 165 166 167 168 169 170 171
- Foreground: 160 161 162 163 164 165 166 167 168 169 170 171
- Background: 160 161 162 163 164 165 166 167 168 169 170 171
- Reversed: 160 161 162 163 164 165 166 167 168 169 170 171
24-bit colors (full RGB):
- Dimmed: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Foreground: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Background: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
- Reversed: ForestGreen - RGB(34,139,34) RebeccaPurple - RGB(102,51,153)
Font styles:
- Default
- Bold
- Dimmed
- Italic
- Underline
- Reversed
- Strikethrough

代码示例

```ansi
Standard ANSI colors:
- Dimmed:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Reversed:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
8-bit colors (showing colors 160-171 as an example):
- Dimmed:  160  161  162  163  164  165  166  167  168  169  170  171 
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
- Reversed:  160  161  162  163  164  165  166  167  168  169  170  171 
24-bit colors (full RGB):
- Dimmed:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Reversed:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
Font styles:
- Default
- Bold
- Dimmed
- Italic
- Underline
- Reversed
- Strikethrough
```

2️⃣编辑器和终端框架#

代码编辑器框架#

my-test-file.js
console.log('Title attribute example')
src/content/index.html
<div>File name comment example</div>

代码示例

```js title="my-test-file.js"
console.log('Title attribute example')
```
```html
<!-- src/content/index.html -->
<div>File name comment example</div>
```

终端框架#

Terminal window
echo "This terminal frame has no title"
PowerShell terminal example
Write-Output "This one has a title!"

代码示例

```bash
echo "This terminal frame has no title"
```
```powershell title="PowerShell terminal example"
Write-Output "This one has a title!"
```

覆盖框架类型#

echo "Look ma, no frame!"
PowerShell Profile.ps1
# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

代码示例

```sh frame="none"
echo "Look ma, no frame!"
```
```ps frame="code" title="PowerShell Profile.ps1"
# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail
```

3️⃣文本与行标记#

行标记#

// 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"

代码示例

```js {1, 4, 7-8}
// 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"
```

指定行标记类型#

line-markers.js
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'
}

代码示例

```js title="line-markers.js" del={2} ins={3-4} {6}
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'
}
```

为行标记添加标签#

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>

代码示例

```jsx {"1":5} del={"2":7-8} ins={"3":10-12}
// 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>
```

将长标签单独一行显示#

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>

代码示例

```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15}
// 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() {
// This entire block gets highlighted as JavaScript,
// and we can still add diff markers to it!
console.log('Old code to be removed')
console.log('New and shiny code!')
}

代码示例

```diff lang="js"
function thisIsJavaScript() {
// This entire block gets highlighted as JavaScript,
// and we can still add diff markers to it!
- console.log('Old code to be removed')
+ console.log('New and shiny code!')
}
```

标记行内的单个文本#

function demo() {
// Mark any given text inside lines
return 'Multiple matches of the given text are supported';
}

代码示例

```js "given text"
function demo() {
// Mark any given text inside lines
return 'Multiple matches of the given text are supported';
}
```

选择内联标记类型( mark 、 ins 、 del )#

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

代码示例

```js "return true;" ins="inserted" del="deleted"
function demo() {
console.log('These are inserted and deleted marker types');
// The return statement uses the default marker type
return true;
}
```

4️⃣配置每个块的自动换行#

// Example with wrap
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
// Example with wrap=false
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

代码示例

```js wrap
// Example with wrap
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
```
```js wrap=false
// Example with wrap=false
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
```

5️⃣代码折叠#

5 collapsed lines
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// You can have multiple collapsed sections
3 collapsed lines
const a = 1
const b = 2
const c = a + b
// This will remain visible
console.log(`Calculation result: ${a} + ${b} = ${c}`)
return c
}
4 collapsed lines
// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

代码示例

```js collapse={1-5, 12-14, 21-24}
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// You can have multiple collapsed sections
const a = 1
const b = 2
const c = a + b
// This will remain visible
console.log(`Calculation result: ${a} + ${b} = ${c}`)
return c
}
// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })
```

6️⃣行号#

显示或关闭行号显示#

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')
// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

代码示例

```js showLineNumbers
// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')
```
```js showLineNumbers=false
// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')
```

更改起始行号#

console.log('Greetings from line 5!')
console.log('I am on line 6')

代码示例

```js showLineNumbers startLineNumber=5
console.log('Greetings from line 5!')
console.log('I am on line 6')
```
扩展语法
https://blog.mortelc.cn/posts/fuwari/markdown/扩展语法/
作者
Mayfly
发布于
2025-08-25
许可协议
CC BY-NC-SA 4.0