2065 字
10 分钟
扩展语法
Markdown 扩展语法
链接卡片
1️⃣GitHub 仓库卡片
Waiting for api.github.com...
代码示例:
::github{repo="saicaca/fuwari"}2️⃣扩展卡片
基本用法
Loading...
Loading description...
::link-card{url="https://example.com"}自定义标题和描述
GitHub
代码托管平台
::link-card{url="https://github.com" title="GitHub" description="代码托管平台"}带自定义图片
Vercel
部署平台
::link-card{url="https://vercel.com" title="Vercel" description="部署平台" image="https://eopageapi.2x.nz/pic?img=h"}自定义图标
GitHub
代码托管平台
::link-card{url="https://github.com" title="GitHub" description="代码托管平台" icon="https://github.com/favicon.ico"}所有实现
二叉树树
你往小腹下探探有棍你就倒倒有豆你就点点比网站好玩🥰
::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 = mc^2$块级公式:$$\int_{-\infty}^\infty e^{-x^2} \, dx = \sqrt{\pi}$$4.Expressive Code代码支持
1️⃣语法高亮
常规语法高亮
console.log('This code is syntax highlighted!')代码示例:
```jsconsole.log('This code is syntax highlighted!')```渲染 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代码示例:
```ansi[1;4mStandard ANSI colors:[0m- Dimmed: [2;30m Black [2;31m Red [2;32m Green [2;33m Yellow [2;34m Blue [2;35m Magenta [2;36m Cyan [2;37m White [0m- Foreground: [30m Black [31m Red [32m Green [33m Yellow [34m Blue [35m Magenta [36m Cyan [37m White [0m- Background: [40m Black [41m Red [42m Green [43m Yellow [44m Blue [45m Magenta [46m Cyan [47m White [0m- Reversed: [7;30m Black [7;31m Red [7;32m Green [7;33m Yellow [7;34m Blue [7;35m Magenta [7;36m Cyan [7;37m White [0m
[1;4m8-bit colors (showing colors 160-171 as an example):[0m- Dimmed: [2;38;5;160m 160 [2;38;5;161m 161 [2;38;5;162m 162 [2;38;5;163m 163 [2;38;5;164m 164 [2;38;5;165m 165 [2;38;5;166m 166 [2;38;5;167m 167 [2;38;5;168m 168 [2;38;5;169m 169 [2;38;5;170m 170 [2;38;5;171m 171 [0m- Foreground: [38;5;160m 160 [38;5;161m 161 [38;5;162m 162 [38;5;163m 163 [38;5;164m 164 [38;5;165m 165 [38;5;166m 166 [38;5;167m 167 [38;5;168m 168 [38;5;169m 169 [38;5;170m 170 [38;5;171m 171 [0m- Background: [48;5;160m 160 [48;5;161m 161 [48;5;162m 162 [48;5;163m 163 [48;5;164m 164 [48;5;165m 165 [48;5;166m 166 [48;5;167m 167 [48;5;168m 168 [48;5;169m 169 [48;5;170m 170 [48;5;171m 171 [0m- Reversed: [7;38;5;160m 160 [7;38;5;161m 161 [7;38;5;162m 162 [7;38;5;163m 163 [7;38;5;164m 164 [7;38;5;165m 165 [7;38;5;166m 166 [7;38;5;167m 167 [7;38;5;168m 168 [7;38;5;169m 169 [7;38;5;170m 170 [7;38;5;171m 171 [0m
[1;4m24-bit colors (full RGB):[0m- Dimmed: [2;38;2;34;139;34m ForestGreen - RGB(34,139,34) [2;38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m- Foreground: [38;2;34;139;34m ForestGreen - RGB(34,139,34) [38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m- Background: [48;2;34;139;34m ForestGreen - RGB(34,139,34) [48;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m- Reversed: [7;38;2;34;139;34m ForestGreen - RGB(34,139,34) [7;38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
[1;4mFont styles:[0m- Default- [1mBold[0m- [2mDimmed[0m- [3mItalic[0m- [4mUnderline[0m- [7mReversed[0m- [9mStrikethrough[0m```2️⃣编辑器和终端框架
代码编辑器框架
console.log('Title attribute example')<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>```终端框架
echo "This terminal frame has no title"Write-Output "This one has a title!"代码示例:
```bashecho "This terminal frame has no title"```
```powershell title="PowerShell terminal example"Write-Output "This one has a title!"```覆盖框架类型
echo "Look ma, no frame!"# Without overriding, this would be a terminal framefunction 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 framefunction 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"```指定行标记类型
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'}```为行标记添加标签
<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>```将长标签单独一行显示
<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 wrapfunction 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=falsefunction 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 wrapfunction 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=falsefunction 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 collapsedimport { 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 defaultengine.doSomething(1, 2, 3, calcFn)
function calcFn() { // You can have multiple collapsed sections3 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 againengine.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 collapsedimport { 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 defaultengine.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 againengine.closeConnection()engine.freeMemory()engine.shutdown({ reason: 'End of example boilerplate code' })```6️⃣行号
显示或关闭行号显示
// This code block will show line numbersconsole.log('Greetings from line 2!')console.log('I am on line 3')// Line numbers are disabled for this blockconsole.log('Hello?')console.log('Sorry, do you know what line I am on?')代码示例:
```js showLineNumbers// This code block will show line numbersconsole.log('Greetings from line 2!')console.log('I am on line 3')```
```js showLineNumbers=false// Line numbers are disabled for this blockconsole.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=5console.log('Greetings from line 5!')console.log('I am on line 6')```