CREDIT: 16
1498 字
7 分钟
Fuwari All in one
嵌入视频
只需从 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 中提取。
Waiting for api.github.com...
使用代码创建 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 语法
TIPGitHub 语法 也同样支持.
> [!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
```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 165166 167 168 169 170 171172 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```console.log('A')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>```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!"# 不使用覆盖,这将会是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 deletedthis 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 deletedthis 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';}文本换行
warp是默认的,使用warp=false关闭换行
preserveIndent是默认的,使用preserveIndent=false将换行内容顶头写
wrap 与 preserveIndent
```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 preserveIndent=false// Example with preserveIndent=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=false// 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 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 preserveIndent=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'}// 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 collapse={"AAAA":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' })```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 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=5console.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/