Meaqua Dairy

Markdown 扩充语法

Wed, 01 May 2024 00:00:00 GMT

提示标签

以下提示标签种类被支持： note tip important warning caution

:::note 用于一般信息的高亮 :::

:::tip 用于帮助信息的高亮 :::

:::important 用于必要信息的高亮 :::

:::warning 用于警告信息的高亮 :::

:::caution 用于负面信息的高亮 :::

基本语法

:::note
用于一般信息的高亮
:::

:::tip
用于帮助信息的高亮
:::

自定义标题

提示标签的标题可以自定义

:::note[自定义标题] 这是一个有自定义标题的提示标签 :::

:::note[自定义标题]
这是一个有自定义标题的提示标签
:::

GitHub 语法

[!TIP] GitHub 语法也受到支持.

> [!NOTE]
> GitHub 语法也受到支持.

> [!TIP]
> GitHub 语法也受到支持.

剧透标签

可以在文字中添加剧透标签，标签内也支持 Markdown 语法。

内容 :spoiler[被隐藏 ayyy]!

内容 :spoiler[被隐藏 **ayyy**]!

如何正确使用 Expressive Code

Wed, 10 Apr 2024 00:00:00 GMT

这里我们将展示利用 Expressive Code 渲染代码块，以下示例基于官方提供的示例修改而成。

Expressive Code

语法高亮

常规语法高亮

console.log('这段代码使用了语法高亮！')

渲染 ANSI 转义字符

ANSI 颜色:
- 常规: [31m红色[0m [32m绿色[0m [33m黄色[0m [34m蓝色[0m [35m品红[0m [36m青色[0m
- 加粗: [1;31m红色[0m [1;32m绿色[0m [1;33m黄色[0m [1;34m蓝色[0m [1;35m品红[0m [1;36m青色[0m
- 变暗: [2;31m红色[0m [2;32m绿色[0m [2;33m黄色[0m [2;34m蓝色[0m [2;35m品红[0m [2;36m青色[0m

256 色 (显示的颜色： 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

完整的 RGB 颜色:
[38;2;34;139;34mForest 绿色 - RGB(34, 139, 34)[0m

文字格式: [1m加粗[0m [2m变暗[0m [3m斜体[0m [4m下划线[0m

编辑器 & 终端边框

Code 编辑器边框

console.log('这是编辑器标题示例')

<!-- src/content/index.html -->
<div>这是文件名称示例</div>

终端边框

echo "这是无标题的终端边框示例"

Write-Output "这是有标题的终端边框示例！"

覆盖边框设置

echo "这是无边框示例！"

# 不覆盖边框设置时，这将是终端边框
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文字 & 行数标记

标记所有行 & 行数区间

// 第 1 行 - 用行数确定
// 第 2 行
// 第 3 行
// 第 4 行 - 用行数确定
// 第 5 行
// 第 6 行
// 第 7 行 - 用行数区间 "7-8" 确定
// 第 8 行 - 用行数区间 "7-8" 确定

选择行数标记种类 (标记, 插入, 删除)

function demo() {
  console.log('这一行被标记删除')
  // 这一行和下一行被标记插入
  console.log('这是被标记插入的第二行')

  return '这一行使用中性的默认标记种类'
}

对行数标记添加标签

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

使用类似 diff 的格式

+这一行被标记插入
-这一行被标记删除
这是一行普通文字

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+这是一个真实的 diff 文件
-所有内容均不会被修改
 包括所有的空格

将语法高亮和类似 diff 的格式结合

  function thisIsJavaScript() {
    // 整个代码块使用 JavaScript 语法高亮
    // 还可以添加 diff 标记!
-   console.log('将要删除的旧代码')
+   console.log('新的代码!')
  }

标记行中的单独字词

function demo() {
  // 标记行中的任意给定文字
  return '支持多次给定文字的匹配';
}

正则表达式

console.log('词汇是的和是哦将被匹配')

斜杠的转译

echo "Test" > /home/test.txt

选择行内标记种类

function demo() {
  console.log('这些是被插入和删除的标记种类');
  // 返回声明使用默认的标记格式
  return true;
}

换行

单个代码块设置换行

// 开启换行的示例
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'
}

// 关闭换行的示例
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'
}

设置换行的缩进

// 保持首行缩进（默认）
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'
}

// 不使用首行缩进
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'
}

可折叠段落

// 引入部分将被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// 这部分默认可见
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // 支持多个折叠块
  const a = 1
  const b = 2
  const c = a + b

  // 这部分默认可见
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// 下面所有代码也将被折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

行数

单个代码块启用行数显示

// 这个代码块将显示行数
console.log('这是第 2 行!')
console.log('这是第 3 行')

// 这个代码块禁用行数显示
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

修改从第几行开始

console.log('这是第 5 行!')
console.log('这是第 6 行')

Markdown 语法示例

Sun, 01 Oct 2023 00:00:00 GMT

一个 h1 标题

段落之间应该用一个空行分隔。

这是第二个段落. 斜体, 加粗, and 等宽文字. 无序列表是这样的:

一个项目
另一个项目
又一个项目

注意 --- 不计算列表标记 --- 实际的文字内容缩进 4 个字符.

引用块是按照这个格式写的

引用块也支持多个段落.

用 3 个横线代表长破折号，用 2 个横线代表范围 (举例, "这些内容都在第 12--14 章节"). 三个点 ... 代表省略号. Unicode 文字是支持的. ☺

一个 h2 标题

这是一个有序列表:

第一个项目
第二个项目
第三个项目

注意这些项目缩进 4 个字符这是一个代码块:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

代码块可以通过缩进 4 个字符来表示。代码块也可以通过反引号分隔块来表示。

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

可以在代码块中标记代码语言来辅助语言高亮

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

一个 h3 标题

这是一个嵌套列表

首先获取以下食材
- 胡萝卜
- 芹菜
- 扁豆
将水煮沸

倒入所有食材并按照下列顺序操作:

找到木勺
揭开锅盖
搅拌
盖上锅盖
将木勺小心放在锅柄上
等待 10 分钟
返回第一步（或完成后关掉炉火）

不要打翻木勺，否则它会掉下来。

嵌套列表总会缩进 4 个字符，包括第三个项目的第二行文字

这是链接到网站, 本地文件, 和本文的一个章节的链接. 这是一个脚注 ^1.

图片用这种形式来声明：

行内数学符号这样表示: $\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*} $$

使用反斜杠来防止特殊字符转义，比如: `foo`, *bar* 等