ciallo-blog

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('标题属性示例')

<!-- 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('单词 yes 和 yep 会被标记。')

转义正斜杠

echo "Test" > /home/test.txt

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

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

自动换行

为单个代码块配置自动换行

// 开启换行的示例
function getLongString() {
  return '这是一段非常长的字符串，除非容器极宽，否则它很可能放不下可用空间'
}

// 关闭换行（wrap=false）的示例
function getLongString() {
  return '这是一段非常长的字符串，除非容器极宽，否则它很可能放不下可用空间'
}

配置换行行的缩进

// 保留缩进的示例（默认开启）
function getLongString() {
  return '这是一段非常长的字符串，除非容器极宽，否则它很可能放不下可用空间'
}

// 关闭保留缩进（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

封面图片来源：Source

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

文章的 Front-matter

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
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 个破折号表示 em 破折号。用 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
# 快，数到十！
for i in range(10):
    # （但别太快）
    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: Shoes, their sizes, and what they're made of

（上面是表格的标题。）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 : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

同样，文本缩进 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: Include Video in the Post
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