随便写写

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

提示框

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

:::note 强调用户即使快速浏览也应该注意的信息。 :::

:::tip 提供帮助用户顺利完成任务的补充信息。 :::

:::important 完成任务所必需的重要信息。 :::

:::warning 由于存在潜在风险，需要用户立即关注的内容。 :::

:::caution 说明某项操作可能带来的负面后果。 :::

基本语法

:::note
强调用户即使快速浏览也应该注意的信息。
:::

:::tip
提供帮助用户顺利完成任务的补充信息。
:::

自定义标题

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

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

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

GitHub 语法

[!TIP] 同样支持 GitHub 提示框语法。

> [!NOTE]
> 同样支持 GitHub 提示框语法。

> [!TIP]
> 同样支持 GitHub 提示框语法。

内容折叠

你可以隐藏文章中的部分内容，隐藏内容同样支持 Markdown 语法。

内容 :spoiler[默认处于隐藏状态 点击查看]！

内容 :spoiler[默认处于隐藏状态 **点击查看**]！

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

中文博客使用指南

Mon, 01 Apr 2024 00:00:00 GMT

封面图片来源：查看原图

本站基于 Astro 构建。本文未涉及的内容，可以参考 Astro 文档。

文章 Frontmatter

---
title: 我的第一篇博客
published: 2023-09-09
description: 这是我的第一篇 Astro 博客文章。
image: ./cover.jpg
tags: [示例, 前端]
category: 前端
draft: false
---

属性	说明
`title`	文章标题。
`published`	文章发布日期。
`description`	文章简介，会显示在首页。
`image`	文章封面路径：网络图片使用 `http://` 或 `https://` 开头；`/` 开头表示 `public` 目录；其他情况相对于当前 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 列开始。

Block quotes are written like so.

They can span multiple paragraphs, if you like.

使用 3 个短横线表示破折号，使用 2 个短横线表示范围（例如“第 12--14 章”）。连续 3 个点 ... 会转换为省略号。支持 Unicode 字符。☺

二级标题

下面是有序列表：

第一项
第二项
第三项

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

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

如你所见，这段代码缩进了 4 个空格。除了缩进代码块，也可以使用带分隔符的代码块：

define foobar() {
    print "欢迎来到示例代码世界！";
}

（这种写法更方便复制和粘贴）。也可以为代码块标记语言，以便进行语法高亮：

import time
# 快速数到十！
for i in range(10):
    # （但不要*太*快）
    time.sleep(0.5)
    print i

三级标题

下面是嵌套列表：

首先准备以下材料：
- 胡萝卜
- 芹菜
- 小扁豆
烧开一些水。

将所有材料放入锅中，并按照以下步骤操作：

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

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

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

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

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

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

在文章中嵌入视频

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

哔哩哔哩视频