我的 Astro Blog 支持什么 MD 语法?

更新于:

测试图片
测试图片

在大概半多个月的 Astro Blog 重构中,我手搓拓展了许多 ReMark Rehype 插件。
所以这里大概是我重构 Blog 的一个副产物,一方面,它是我的测试场地,另一方面,它也展示了我 Blog 所能支持的 Markdown 语法。

不知道怎么分类的

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaHover 测试?

Hover 测试?Hover 测试?

字体

MapleMono

MapleMono Normal-NF-CN-Regular
https://font.subf.dev/en/playground/

The quick brown fox jumps over the lazy dog.
敏捷的棕色狐狸跨过懒狗。

---------------中文英文2:1--------------
|ab|cd|ef|gh|ij|kl|mn|op|qr|st|uv|wx|yz|
|这|应|该|是|中|英|文|完|美|的|2:1等|距|
|A0|1!|2@|3#|4$|5%|6^|7&|8*|9(|0)|=+|[]|


abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 (){}[]
+ - * / = .,;:!? #&$%@|^

Basic Ligatures:
calt: ==>
zero: 0

Character Variants:
cv01 @$&
cv02 a
cv03 i
cv04 l1
cv05 g
cv06 i
cv07 J
cv08 r
cv61 ,;
cv62 ?
cv63 <=

Italic Only:
...


CN Only:
cv96 “‘’”
cv97 ……
cv98 ——
cv99 ,。

Stylistic sets:
ss01 ==
ss02 >=
ss03 [info]
ss04 __
ss05 \\
ss06 all
ss07 >>>
ss08 >>=
ss09 ~= !=
ss10 =~
ss11 |=

LXGW WenKai GB

The quick brown fox jumps over the lazy dog.
敏捷的棕色狐狸跨过懒狗。

The quick brown fox jumps over the lazy dog.
敏捷的棕色狐狸跨过懒狗。

The quick brown fox jumps over the lazy dog.
敏捷的棕色狐狸跨过懒狗。

Mermaid

Mermaid 图表 亮色Mermaid 图表 暗色
```mermaid
graph TD
  A[block-latex-wrapper] --> B[latex-svg]
  B --> C[svgElement]
```
Mermaid 图表 亮色Mermaid 图表 暗色
```mermaid
graph LR
  Markdown -->|string| Remark
  Parser -->|mdast| Remark-rehype
  Remark -->|hast| Rehype
  Rehype-Plugins -->|hast| Rehype-Shiki
  Rehype-Shiki -->|hast| Compiler
  Rehype -->|string| HTML

  subgraph Astro
    Remark
    Rehype

  subgraph Remark
    direction TB
    Parser
    Remark-rehype
  end

  subgraph Rehype
    direction TB
    Rehype-Plugins
    Rehype-Shiki
    Compiler
    end
  end

  subgraph Input
    Markdown
  end

  subgraph Output
    HTML
  end
```

Inline Latex

靠左且比较短的 latex。 $ e^{i\pi} + 1 = 0 $ 靠左且比较短的 latex。

红、绿、蓝三种光的波长分别为 。任意两种原色的光谱不可能是另一种原色的线性组合,也就是说,不可能使用 的光叠加出 的光。

红、绿、蓝三种光的波长分别为 $ \lambda = 700nm $、$ \lambda=546.1nm $、 $ \lambda = 435.8nm $。
任意两种原色的光谱不可能是另一种原色的线性组合,也就是说,不可能使用 $ 700nm $ 和 $ 546.1nm $ 的光叠加出 $ 435.8nm $ 的光。
  1. 二次方程: $ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $
  2. 欧拉恒等式: $ e^{i\pi} + 1 = 0 $
  3. 导数: $$ f'(x) = \lim_{h \to 0}\frac{f(x+h)-f(x)}{h} $$
  4. 向量点积: $ \vec{a} \cdot \vec{b} = |a||b|\cos\theta $
  5. 求和: $ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $
  6. 单行超长超高: $\int_{-\infty}^{\infty} \left( \sum_{n=1}^{\infty} \frac{(-1)^{n+1}}{n^2} \cdot e^{-n^2 x^2} \right) \cdot \left( \frac{d^2}{dx^2} \left( \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x - \mu)^2}{2\sigma^2}} \right) \right) dx = \frac{\pi^2}{6} \cdot \frac{d^2}{dx^2} \Phi(x)$
  7. 再宽再高点: $\int_{-\infty}^{\infty} \left( \sum_{n=1}^{\infty} \frac{(-1)^{n+1}}{n^2} \cdot e^{-n^2 x^2} \right) \cdot \left( \frac{d^2}{dx^2} \left( \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x - \mu)^2}{2\sigma^2}} \right) \right) dx = \frac{\pi^2}{6} \cdot \frac{d^2}{dx^2} \Phi(x)\int_{-\infty}^{\infty} \left( \sum_{n=1}^{\infty} \frac{(-1)^{n+1}}{n^2} \cdot e^{-n^2 x^2} \right) \cdot \left( \frac{d^2}{dx^2} \left( \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x - \mu)^2}{2\sigma^2}} \right) \right) dx = \frac{\pi^2}{6} \cdot \frac{d^2}{dx^2} \Phi(x)\int_{-\infty}^{\infty} \left( \sum_{n=1}^{\infty} \frac{(-1)^{n+1}}{n^2} \cdot e^{-n^2 x^2} \right) \cdot \left( \frac{d^2}{dx^2} \left( \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x - \mu)^2}{2\sigma^2}} \right) \right) dx = \frac{\pi^2}{6} \cdot \frac{d^2}{dx^2} \Phi(x)\int_{-\infty}^{\infty} \left( \sum_{n=1}^{\infty} \frac{(-1)^{n+1}}{n^2} \cdot e^{-n^2 x^2} \right) \cdot \left( \frac{d^2}{dx^2} \left( \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x - \mu)^2}{2\sigma^2}} \right) \right) dx = \frac{\pi^2}{6} \cdot \frac{d^2}{dx^2} \Phi(x)aabb$

Block Latex

  1. 麦克斯韦方程组:
$$$
\begin{align}
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \vec{B} &= 0 \\
\nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \\
\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial \vec{E}}{\partial t}
\end{align}
$$$
  1. 爱因斯坦场方程:
$$$
R_{\mu\nu} - \frac{1}{2}Rg_{\mu\nu} + \Lambda g_{\mu\nu} = \frac{8\pi G}{c^4}T_{\mu\nu}
$$$
  1. 矩阵行列式:
$$$
\det(A) = \begin{vmatrix}
a_{11} & a_{12} & \cdots & a_{1n} \\
a_{21} & a_{22} & \cdots & a_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{n1} & a_{n2} & \cdots & a_{nn}
\end{vmatrix}
$$$
  1. 期望值上界推导
$$
E(X)=\sum_{i=1}^{n-1}\sum_{j=i+1}^{n}\frac{2}{j-i+1} = \sum_{i=1}^{n-1}\sum_{k=1}^{n-i}\frac{2}{k+1} < \sum_{i=1}^{n-1}\sum_{k=1}^{n}\frac{2}{k} = \sum_{i=1}^{n-1}O(lgn)=O(nlgn)
$$
  1. 期望值展开
$$
E(X)=E[\sum_{i=1}^{n-1}\sum_{j=i+1}^{n}X_{ij}]=\sum_{i=1}^{n-1}\sum_{j=i+1}^{n}E[X_{ij}]=\sum_{i=1}^{n-1}\sum_{j=i+1}^{n}P\{z_i与z_j进行比较\}
$$

TikzJax (已废弃)

Inline styles

bold text **bold text**
bold text __bold text__
Loveisbold Love**is**bold

italic text *italic text*
italic text _italic text_
Acatmeow A*cat*meow

strikethrough text ~~strikethrough text~~

拼音(pin yin) :ruby[`拼音`(pin yin)]

拼音(pin yin) :ruby[拼音(pin yin)]

拼音(pin yin) [:ruby[拼音(pin yin)]](https://baidu.com "垃圾")

隐藏文字 :spoiler[隐藏文字]
隐藏文字 **:spoiler[隐藏文字]**
隐藏文字 abcd :spoiler[`隐藏文字` abcd]

footnotes

在信息时代,知识的传播速度与广度达到了前所未有的水平1。无论是学术研究、新闻报道,还是日常生活中的知识获取,互联网都发挥着核心作用2。搜索引擎、在线百科全书以及各类专业数据库的兴起,使得人们能够在几秒钟内获取过去可能需要数天查阅图书馆才能找到的信息3

这种变革不仅仅体现在信息的可获得性上,更体现在人们思维方式与学习模式的改变。过去的学习往往依赖系统化教材和课堂讲授,而如今,更多人选择通过视频课程、互动问答平台或开放课程进行自主学习4。这在提高效率的同时,也对信息筛选能力提出了更高要求5

然而,信息爆炸也带来了虚假信息泛滥的副作用6。因此,培养辨别信息真伪的能力,成为现代公民的基本素养之一7。这也促使各类平台加强内容审核机制,同时鼓励用户提供可信来源以增强论述的权威性8

以上文字由 LLM 生成。
测试脚注中的行内 MD 语法。9

在信息时代,知识的传播速度与广度达到了前所未有的水平[^1]。无论是学术研究、新闻报道,还是日常生活中的知识获取,互联网都发挥着核心作用[^2]。搜索引擎、在线百科全书以及各类专业数据库的兴起,使得人们能够在几秒钟内获取过去可能需要数天查阅图书馆才能找到的信息[^3]

这种变革不仅仅体现在信息的可获得性上,更体现在人们思维方式与学习模式的改变。过去的学习往往依赖系统化教材和课堂讲授,而如今,更多人选择通过视频课程、互动问答平台或开放课程进行自主学习[^4]。这在提高效率的同时,也对信息筛选能力提出了更高要求[^5]

然而,信息爆炸也带来了虚假信息泛滥的副作用[^6]。因此,培养辨别信息真伪的能力,成为现代公民的基本素养之一[^7]。这也促使各类平台加强内容审核机制,同时鼓励用户提供可信来源以增强论述的权威性[^8]

> 这段文字由 LLM 生成。

[^1]: 信息传播速度的变革是互联网发展的直接结果。
[^2]: 网络成为知识获取的主要渠道之一。根据 Pew Research Center 的统计,超过 85% 的美国成年人将互联网作为日常获取新闻和知识的主要途径。在发展中国家,随着智能手机和宽带普及率提升,这一比例仍在快速上升。
[^3]: 数字工具大大压缩了信息搜索所需时间。传统的纸质文献检索需要翻阅卡片目录、期刊索引等耗时手段,而现代搜索引擎通过算法自动匹配关键词与语义上下文,能在数毫秒内返回相关结果,极大提高了工作与学习效率。
[^4]: 现代教育方式逐渐转向灵活、自主的在线模式。以 Coursera、edX、MOOC 为代表的在线课程平台提供了全球范围内的高质量教育资源,使得任何人只要拥有网络连接,就能在家中接受世界名校的课程教育。
[^5]: 信息量增加的同时也要求更高的辨识与筛选能力。面对庞杂的搜索结果,用户必须具备基本的媒体素养与判断标准,例如查看信息来源是否权威、是否为同行评审内容、是否引用了原始数据等。
[^6]: 虚假信息问题在社交媒体平台尤为突出。
[^7]: 批判性思维成为信息社会中重要的技能。教育体系越来越强调逻辑思维与独立判断能力,而不仅仅是知识记忆。许多高校已将批判性写作与媒体素养列为基础课程,意在帮助学生抵御信息误导。
[^8]: 平台与用户共同维护内容质量。YouTube、Twitter(现 X)、Facebook 等平台近年来都引入了“社区审核”“事实核查标签”等机制。同时,一些用户社区(如 Wikipedia 编辑组)通过协作式管理确保信息的准确性与中立性。

Lists

  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item
  5. test

  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item

Block styles

Collapse Bar

这是一个标题

这是一个收缩框

代码框
console.log('Hello World')

拼音(pin yin)

Tables

abcdabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaaabcdaaaaaaaaaaaaaaaaaaaaaa
表/链PREROUTINGINPUTFORWARDOUTPUTPOSTROUTING作用
rawXX用于跟踪链接
mangleXXXXX修改包的 IP 头
natXXXX网络地址转换
filterXXX作为防火墙使用

blockqoute
blockqoute2
blockqoute3

blockqoute
blockqoute2
blockqoute3

Shiki Transformers

shiki diff
@Client.on_inline_query()  
async def test_inline(client: Client, query: InlineQuery): 
@Client.on_inline_query()@Client.on_inline_query()@Client.on_inline_query()@Client.on_inline_query()@Client.on_inline_query()@Client.on_inline_query()
audio = await upload_document(
    client=client,
    chat_id=client.me.id, 
    file=beep_file,
    file_name=beep_file.name,
    mime_type=""
)
shiki diff
@Client.on_inline_query()  
async def test_inline(client: Client, query: InlineQuery): 
@Client.on_inline_query()  
audio = await upload_document(
    client=client,
    chat_id=client.me.id, 
    file=beep_file,
    file_name=beep_file.name,
    mime_type=""
)
shiki highlight
@Client.on_inline_query()  
async def test_inline(client: Client, query: InlineQuery):
shiki focused
audio = await upload_document(
    client=client,
    chat_id=client.me.id, 
    file=beep_file,
    file_name=beep_file.name,
    mime_type=""
)
error level
console.log('No errors or warnings')
console.error('Error') 
console.warn('Warning') 
print(query)
beep_file = BytesIO()
file_name = f"beep{random.choice([1, 2, 3])}.ogg"

with open(file_name, "rb") as f:
    beep_file.write(f.read())

beep_file.seek(0)
beep_file.name = file_name

audio = await upload_document(
    client=client,
    chat_id=client.me.id,
    file=beep_file,
    file_name=beep_file.name,
    mime_type=""
)

await query.answer(
    results=[
        InlineQueryResultCachedVoice(
            voice_file_id=audio.file_id,
            caption=file_name,
            title=file_name,
            id=str(uuid.uuid4()),
        )
    ],
    cache_time=1,
    is_personal=False,
)

Footnotes

  1. 信息传播速度的变革是互联网发展的直接结果。

  2. 网络成为知识获取的主要渠道之一。根据 Pew Research Center 的统计,超过 85% 的美国成年人将互联网作为日常获取新闻和知识的主要途径。在发展中国家,随着智能手机和宽带普及率提升,这一比例仍在快速上升。

  3. 数字工具大大压缩了信息搜索所需时间。传统的纸质文献检索需要翻阅卡片目录、期刊索引等耗时手段,而现代搜索引擎通过算法自动匹配关键词与语义上下文,能在数毫秒内返回相关结果,极大提高了工作与学习效率。

  4. 现代教育方式逐渐转向灵活、自主的在线模式。以 Coursera、edX、MOOC 为代表的在线课程平台提供了全球范围内的高质量教育资源,使得任何人只要拥有网络连接,就能在家中接受世界名校的课程教育。

  5. 信息量增加的同时也要求更高的辨识与筛选能力。面对庞杂的搜索结果,用户必须具备基本的媒体素养与判断标准,例如查看信息来源是否权威、是否为同行评审内容、是否引用了原始数据等。

  6. 虚假信息问题在社交媒体平台尤为突出。

  7. 批判性思维成为信息社会中重要的技能。教育体系越来越强调逻辑思维与独立判断能力,而不仅仅是知识记忆。许多高校已将批判性写作与媒体素养列为基础课程,意在帮助学生抵御信息误导。

  8. 平台与用户共同维护内容质量。YouTube、Twitter(现 X)、Facebook 等平台近年来都引入了“社区审核”“事实核查标签”等机制。同时,一些用户社区(如 Wikipedia 编辑组)通过协作式管理确保信息的准确性与中立性。

  9. 加粗 斜体 百度链接 9 2



评论加载中……