1498 字
7 分钟
Fuwari All in one
2025-06-17
无标签

嵌入视频#

只需从 YouTube 或其他平台复制嵌入代码,然后将其粘贴到 Markdown 文件中即可。

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

Bilibili#

YouTube#

GitHub 仓库卡片#

你可以添加链接到 GitHub 存储库的动态卡片,在页面加载时,存储库信息将从 GitHub API 中提取。

siltal
/
JetbrainsSplashModify
Waiting for api.github.com...
00K
0K
0K
Waiting...

使用代码创建 GitHub 存储库卡 ::github{repo="<owner>/<repo>"}.

::github{repo="siltal/JetbrainsSplashModify"}

提示卡#

支持以下类型的提示: note tip important warning caution

:::note
突出显示用户应该考虑的信息,即使浏览时也是如此。
:::
NOTE

突出显示用户应该考虑的信息,即使浏览时也是如此。

TIP

帮助用户更进一步可选信息。

IMPORTANT

用户成功所必需的关键信息。

WARNING

由于存在潜在风险,需要用户立即关注的关键内容。

CAUTION

某一行为的潜在负面后果。

自定义标题#

提示的标题可以自定义。

:::note[我的自定义标题]
This is a note with a custom title.
:::
我的自定义标题

This is a note with a custom title.

GitHub 语法#

TIP

GitHub 语法 也同样支持.

> [!NOTE]
> The GitHub syntax is also supported.
> [!TIP]
> The GitHub syntax is also supported.

富有表现力的代码#

在这里,我们将探索使用 Expressive Code 的代码块是什么样子。提供的示例基于官方文档,您可以参考该文档了解更多详细信息。

语法高亮#

语法高亮

常规语法高亮#

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

渲染 ANSI 转义序列#

```ansi
```
Terminal window
ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold: Red Green Yellow Blue Magenta Cyan
- Dimmed: Red Green Yellow Blue Magenta Cyan
256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177
Full RGB colors:
ForestGreen - RGB(34, 139, 34)
Text formatting: Bold Dimmed Italic Underline

编辑器和终端框架#

编辑器和终端框架

编辑器框架#

```js title="file.js"
console.log('A')
```
```html
<!-- src/content/index.html -->
HTML PAGE
```
file.js
console.log('A')
src/content/index.html
HTML PAGE

终端框架#

bat,batch,cmd,console,powershell,ps,ps1,psd1,psm1,sh,shell,shellscript,shellsession,zsh

```powershell title="PowerShell terminal example"
C:\User\Siltal\Desktop>
```
PowerShell terminal example
C:\User\Siltal\Desktop>

覆盖框架类型#

```sh frame="none"
sh frame="none"
echo "Look ma, no frame!"
```
```ps frame="code" title="PowerShell Profile.ps1"
# 不使用覆盖,这将会是ps终端的样式
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail
```
sh frame="none"
echo "Look ma, no frame!"
PowerShell Profile.ps1
# 不使用覆盖,这将会是ps终端的样式
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本和行标记#

文本和行标记

行标记,区间标记,插入行,删除行,命名标记,给长标签留出单独的空行#

```js {1, 3, 5-7} ins={2} del={"删除":4} {"long long marker":9}
// Line 1 - targeted by line number
// Line 2
// Line 3 - targeted by line number
// Line 4
// Line 5 - targeted by range "5-7"
// Line 6 - targeted by range "5-7"
// Line 7 - targeted by range "5-7"
// Line 8
// Line 10 - targeted by range
```
// Line 1 - targeted by line number
// Line 2
// Line 3 - targeted by line number
// Line 4
// Line 5 - targeted by range "5-7"
// Line 6 - targeted by range "5-7"
// Line 7 - targeted by range "5-7"
// Line 8
// Line 10 - targeted by long marker

使用diff语法#

```diff
+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
no whitespace will be removed either
```
+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
no whitespace will be removed either

使用diff同时指定语言#

```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 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!')
}

框选给定的文本#

```js "given text" ins=/a?re/ del=/\/\//
function demo() {
// Mark any given text inside lines
return 'Multiple matches of the given text are supported';
}
```
function demo() {
// Mark any given text inside lines
return 'Multiple matches of the given text are supported';
}

文本换行#

Word Wrap

warp是默认的,使用warp=false关闭换行

preserveIndent是默认的,使用preserveIndent=false将换行内容顶头写

wrap 与 preserveIndent#

```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 preserveIndent=false
// Example with preserveIndent=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=false
// 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
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 preserveIndent=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'
}
// 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 collapse={"AAAA":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' })
```
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 showLineNumbers
// 显示行号
console.log('Greetings from line 2!')
console.log('I am on line 3')
```
```js showLineNumbers=false
// 不显示行号
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')
```
// 显示行号
console.log('Greetings from line 2!')
console.log('I am on line 3')
// 不显示行号
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

改变起始行号#

```js showLineNumbers startLineNumber=5
console.log('Greetings from line 5!')
console.log('I am on line 6')
```
console.log('Greetings from line 5!')
console.log('I am on line 6')
Fuwari All in one
https://siltal.github.io/posts/fuwari-all-in-one/
作者
Siltal
发布于
2025-06-17
许可协议
CC BY-NC-SA 4.0