Markdown 扩展语法

console.log('此代码已语法高亮！')

// 使用 `title="my-test-file.js"`
console.log('标题属性示例')

// 使用 `// src/content/index.ts`
console.log('文件名注释示例')

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

  return '此行使用中性的默认标记类型'
}

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

:::image-figure[这是一个带 _`<figure>` 属性_ 的 **Figcaption**]{style="text-align:center;color:orange"}
![](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::

:::image-figure[这是一个带 _`<img>` 属性_ 的 **figcaption**。]
![](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)(style: width:600px;)
:::

<!-- 💡 使用 `(class:no-zoom)` 禁用缩放 -->
:::image-figure[这是一个带 `class:no-zoom` 的 **figcaption**。]
![](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)(class:no-zoom)
:::

<!-- 💡 如果没有 `[caption]`，则使用 `[alt]` 作为 figcaption。 -->
:::image-figure
![如果未设置 `[caption]`，`![]()` 中的 alt 文本将用作 figcaption。](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::

<!-- 💡 适用于浅色 (img-light) 和深色 (img-dark) 模式的图片 -->
<!-- ⚠️ 两个图片语法 (![]()) 之间必须至少有一行空行，否则将无法正常工作。 -->
:::image-figure[此示例显示了适用于浅色（添加 `class:img-light`）和深色（添加 `class:img-dark`）模式的不同图片。]
![](~/assets/images/markdown-extension-syntax/image-16-9-light.png)(class:img-light)

![](~/assets/images/markdown-extension-syntax/image-16-9-light.png)(class:img-dark)
:::

<!-- ❌ 如果没有可用于 figcaption 的文本，它将无法工作。 -->
:::image-figure
![](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::

:::image-a{href="https://github.com/Dnzzk2/Litos"}
![OG image](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::

:::image-a{href="https://github.com/Dnzzk2/Litos" style="display:block" .custom-class}
![OG image](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)(style: margin-bottom: -1rem; transform:scaleX(1.1) scaleY(1.1);, loading: eager)
:::

::::image-a{href="https://github.com/Dnzzk2/Litos"}
:::image-figure[此示例显示 `:::image-a` 包装 `:::image-figure`（两者可互换）。]
![OG image](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::
::::

<!-- ❌ 未提供外部链接，将无法工作。-->
:::image-a
![OG image](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::

:::::image-div-polaroid
:::image-figure-polaroid[这是一个带 _`<img>` 属性_ 的 **figcaption**。]
![OG image](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::
:::::

:::::image-div-polaroid
:::image-figure-polaroid
![OG image](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)

markdown-extension-syntax.png
:::
:::::

:::::image-div-polaroid
:::image-figure-polaroid
![OG image](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::
:::::

<!-- 更改样式 -->
:::::image-div-polaroid
:::image-figure-polaroid{style="width:500px;"}
![OG image](~/assets/images/markdown-extension-syntax/markdown-extension-syntax.png)
:::
:::::

<!-- 嵌入 YouTube 视频 -->
::video-youtube{#gxBkghlglTg}

<!-- 嵌入带有自定义 `title` 属性的 Bilibili 视频 -->
::video-bilibili[custom title]{id=BV1MC4y1c7Kv}

<!-- 嵌入带有 class `no-scale` 以禁用缩放的 Vimeo 视频 -->
::video-vimeo{id=912831806 class='no-scale'}
<!-- ::video-vimeo{id=912831806 .no-scale} -->

<!-- 嵌入自定义视频 URL（必须使用 `id`，而不是 `#`） -->
::video{id=https://www.youtube-nocookie.com/embed/gxBkghlglTg}

:::details
::summary[详情下拉菜单]
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 4
:::