QWQ

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[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub 语法

[!TIP] 也支持 GitHub 语法。

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

剧透

你可以给文字加上剧透效果，文本同样支持 Markdown 语法。

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

The content :spoiler[is hidden **ayyy**]!

Expressive Code 示例

Wed, 10 Apr 2024 00:00:00 GMT

这里，我们来了解使用 Expressive Code 时代码块的样子。下面的示例基于官方文档，想了解更多细节可以参考官方文档。

Expressive Code

语法高亮

常规语法高亮

console.log('This code is syntax highlighted!')

渲染 ANSI 转义序列

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 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

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

编辑器与终端外框

代码编辑器外框

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

终端外框

echo "This terminal frame has no title"

Write-Output "This one has a title!"

覆盖外框类型

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本与行标记

标记整行与行范围

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

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

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

给行标记添加标签

// 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 的语法

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

把语法高亮和类似 diff 的语法结合

  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 demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

正则表达式

console.log('The words yes and yep will be marked.')

转义正斜杠

echo "Test" > /home/test.txt

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

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

自动换行

按代码块配置自动换行

// Example with wrap
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'
}

// Example with wrap=false
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'
}

配置换行后的缩进

// Example with preserveIndent (enabled by default)
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'
}

// Example with preserveIndent=false
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'
}

可折叠区域

// All this boilerplate setup code will be collapsed
import { 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 default
engine.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 again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

行号

按代码块显示行号

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

修改起始行号

console.log('Greetings from line 5!')
console.log('I am on line 6')

Fuwari 简明使用指南

Mon, 01 Apr 2024 00:00:00 GMT

封面图来源：来源

这个博客模板基于 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 个连字符表示破折号。用 2 个连字符表示范围（例如 "it's all in chapters 12--14"）。三个点 ... 会转换成省略号。支持 Unicode。☺

二级标题

这是一个有序列表：

第一项
第二项
第三项

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

# Let me re-iterate ...
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。

表格可以长这样：

尺寸材料颜色

9 皮革棕色 10 麻布原色 11 玻璃透明

表格：鞋子、它们的尺码以及材质

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

关键词文本

红色日落、苹果，以及其他红色或偏红的东西。

绿色叶子、草地、青蛙，以及其他不太容易当的颜色。

下面是一条水平线。

这是一个定义列表：

苹果 : 适合做苹果酱。橙子 : 柑橘！番茄 : tomatoe 里没有 "e"。

同样，文字缩进 4 个空格。（在每个术语/定义对之间加一个空行，可以把内容排得更开。）

这是一个 “行块”：

| 第一行 | 第二行 | 第三行

图片可以这样指定：

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

哔哩哔哩