Caph

Markdown 扩展功能

Wed, 01 May 2024 00:00:00 GMT

GitHub 仓库卡片

你可以添加链接到 GitHub 仓库的动态卡片，页面加载时会从 GitHub API 拉取仓库信息。

::github{repo="Fabrizz/MMM-OnSpotify"}

使用代码 ::github{repo="<owner>/<repo>"} 创建 GitHub 仓库卡片。

::github{repo="saicaca/fuwari"}

提示框（Admonitions）

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

:::note 突出显示用户即使快速浏览也应留意的重要信息。 :::

:::tip 可选信息，帮助用户更顺利地完成任务。 :::

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

:::warning 因潜在风险需要用户立即关注的严重内容。 :::

:::caution 操作可能带来的负面后果。 :::

基本语法

:::note
突出显示用户即使快速浏览也应留意的重要信息。
:::

:::tip
可选信息，帮助用户更顺利地完成任务。
:::

自定义标题

可以自定义提示框的标题。

:::note[我的自定义标题] 这是一个带有自定义标题的提示框。 :::

:::note[我的自定义标题]
这是一个带有自定义标题的提示框。
:::

GitHub 语法

[!TIP] 也支持 GitHub 语法。

> [!NOTE]
> 也支持 GitHub 语法。

> [!TIP]
> 也支持 GitHub 语法。

剧透（Spoiler）

你可以为文本添加剧透效果，内容同样支持 Markdown 语法。

内容 :spoiler[被隐藏了嘿嘿]！

内容 :spoiler[被隐藏了 **嘿嘿**]！

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;34m森林绿 - RGB(34, 139, 34)[0m

文本格式：[1m粗体[0m [2m淡化[0m [3m斜体[0m [4m下划线[0m

编辑器与终端边框

代码编辑器边框

console.log('title 属性示例')

<!-- 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" 标记

选择行标记类型（mark、ins、del）

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 "测试" > /home/test.txt

选择行内标记类型（mark、ins、del）

function demo() {
  console.log('这些是已插入和已删除的标记类型');
  // return 语句使用默认标记类型
  return true;
}

自动换行

按代码块配置自动换行

// 启用 wrap 的示例
function getLongString() {
  return '这是一段非常长的字符串，除非容器极宽，否则很可能无法完整显示在当前可用空间内'
}

// 禁用 wrap 的示例（wrap=false）
function getLongString() {
  return '这是一段非常长的字符串，除非容器极宽，否则很可能无法完整显示在当前可用空间内'
}

配置换行行的缩进

// 启用 preserveIndent 的示例（默认开启）
function getLongString() {
  return '这是一段非常长的字符串，除非容器极宽，否则很可能无法完整显示在当前可用空间内'
}

// 禁用 preserveIndent 的示例（preserveIndent=false）
function getLongString() {
  return '这是一段非常长的字符串，除非容器极宽，否则很可能无法完整显示在当前可用空间内'
}

可折叠区块

// 这些样板初始化代码会被折叠
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(`计算结果：${a} + ${b} = ${c}`)
  return c
}

// 从这里到代码块末尾的内容会再次折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例样板代码结束' })

行号

按代码块显示行号

// 这个代码块会显示行号
console.log('来自第 2 行的问候！')
console.log('我在第 3 行')

// 这个代码块禁用了行号
console.log('你好？')
console.log('抱歉，你知道我现在在第几行吗？')

更改起始行号

console.log('来自第 5 行的问候！')
console.log('我在第 6 行')

Fuwari 简易指南

Mon, 01 Apr 2024 00:00:00 GMT

封面图片来源：来源

本博客模板基于 Astro 构建。本指南未提及的内容，你可以在 Astro 文档中找到答案。

文章 Front-matter

---
title: 我的第一篇博客
published: 2023-09-09
description: 这是我新 Astro 博客的第一篇文章。
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

属性	说明
`title`	文章标题。
`published`	文章发布日期。
`description`	文章简短描述，显示在首页。
`image`	文章封面图片路径。<br/>1. 以 `http://` 或 `https://` 开头：使用网络图片<br/>2. 以 `/` 开头：使用 `public` 目录中的图片<br/>3. 无前缀：相对于 Markdown 文件的路径
`tags`	文章标签。
`category`	文章分类。
`draft`	是否为草稿，草稿不会显示。

文章文件存放位置

文章文件应放在 src/content/posts/ 目录下。你也可以创建子目录来更好地组织文章和资源。

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown 示例

Sun, 01 Oct 2023 00:00:00 GMT

一级标题

段落之间用空行分隔。

第二段。斜体、粗体和 等宽字体。列表项如下：

这一项
那一项
另一项

请注意——不考虑星号——实际文本内容从第 4 列开始。

引用块可以这样写。

如果需要，可以跨多个段落，像这样。

用 3 个连字符表示破折号。用 2 个连字符表示范围（例如，"第 12--14 章"）。三个点 ... 会被转换为省略号。支持 Unicode。☺

二级标题

这是一个有序列表：

第一项
第二项
第三项

再次注意实际文本从第 4 列开始（距左侧 4 个字符）。下面是一个代码示例：

# 让我重申 ...
for i in 1 .. 10 { do-something(i) }

如你所料，缩进 4 个空格。顺便说一下，除了缩进代码块，你也可以使用定界符块：

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

（这样复制粘贴更方便）。你还可以选择让 Pandoc 对定界符块进行语法高亮：

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

三级标题

现在是一个嵌套列表：

首先，准备这些食材：
- 胡萝卜
- 芹菜
- 扁豆
烧一些水。

把所有东西倒进锅里，然后按以下步骤操作：

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

不要碰到木勺，否则它会掉下来。

再次注意，文本始终在 4 空格缩进处对齐（包括上面第 3 项的最后一行）。

这是一个指向网站、本地文档和当前文档中的章节标题的链接。这是一个脚注 ^1。

表格可以是这样的：

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: 鞋子、尺码及材质

（上面是表格的标题。）Pandoc 也支持多行表格：

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

下面是一条水平分隔线。

这是一个定义列表：

apples : 适合做苹果酱。 oranges : 柑橘类水果！ tomatoes : tomatoe 里没有 "e"。

同样，文本缩进 4 个空格。（在每个术语/定义对之间加空行，可以让排版更宽松。）

这是一个「行块」：

| Line one | Line too | Line tree

图片可以这样指定：

行内数学公式这样写：$\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* 等。

在文章中嵌入视频

Tue, 01 Aug 2023 00:00:00 GMT

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

---
title: 在文章中嵌入视频
published: 2023-10-19
// ...
---

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

YouTube

Bilibili