testpage0

本文档全部import：

import { Highlight, Keyword, Light, B1, B2, B3, BH3, B3W,Button, MyColor, Card} from '@site/src/components/ForMDX';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

🔗 按钮链接

📖 STM32 教程 🌸 回想空间 🌽 还不错的玉米 📱 测试群链接

代码：（无需import）

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
  <a href="https://www.bilibili.com/video/BV12v4y1y7uV" class="source_card_button" target="_blank">📖 STM32 教程</a>
  <a href="/docs/reflection-space" class="source_card_button" target="_blank">🌸 回想空间</a>
  <a href="https://e.tb.cn/h.hTZaa83WZiz2Wfr" class="source_card_button" target="_blank">🌽 还不错的玉米</a>
  <a href="https://qun.qq.com/universal-share/share?ac=1&authKey=BvgzFVJKMU0dbLEz%2BkWm8tydUKa%2F%2BTpBiaW9Ner6BemqNZfLQyN3xGlo%2BjLzhTL5&busi_data=eyJncm91cENvZGUiOiI5MzgyMTk4NjMiLCJ0b2tlbiI6IkUzNFhjVzJuUE9FY3IxSm14SmFza2J1RWhTcHJWMElMTkxITkNHcjBwcXhmMVN5Y21JUVljZ25ieldaRUFCUjEiLCJ1aW4iOiIyNTYwMjkxMjQxIn0%3D&data=lHupxGd_sZuAjGp9DpXZH7KnauiAdCCqC_JIFVTwLE5-rOMCTKgggw9oo9XpURlTsaCKXlUUDCeolPJ87PqKZA&svctype=4&tempid=h5_group_info" class="source_card_button" target="_blank">📱 测试群链接</a>
</div>

按钮下载（外链）

立即下载

代码：（无需import）

<a href="https://pan.baud-dance.com/d/STM32CubeIDE/st-stm32cubeide_1.18.0_24413_20250227_1633_x86_64.exe" class="source_download_button" target="_blank">立即下载</a>

自定义按钮

📘默认按钮 📘绿色按钮 📘蓝色大按钮

📘默认按钮 📘按钮1 📘GitHub 仓库

代码：(需 import {Button} from '@site/src/components/ForMDX';)

<div style={{
  display: 'flex',
  flexDirection: 'column',
  rowGap: '1rem'
}}>
  {/* 第一行按钮 */}
  <div style={{ display: 'flex', gap: '1rem' }}>
    <Button icon="📘" href="https://example.com">默认按钮</Button>
    <Button icon="📘" href="https://example.com" color="#2D8E0A">绿色按钮</Button>
	<Button icon="📘" href="https://example.com" color="#1877F2" size="large">蓝色大按钮</Button>
  </div>

  {/* 第二行按钮 */}
  <div style={{ display: 'flex', gap: '1rem' }}>
    <Button icon="📘" href="https://example.com">默认按钮</Button>
    <Button icon="📘" href="#">按钮1</Button>
	<Button icon="📘" href="https://github.com/your-repo" color="#333"textColor="white" size="medium">GitHub 仓库</Button>
  </div>

  {/* 第三行按钮 */}
  <div style={{ display: 'flex', gap: '1rem' }}>
	<Button icon="⚙️" onClick={() => alert('点击了')}>打开设置</Button>
	<Button loading>加载中...</Button>
	<Button disabled>不可点击</Button>
  </div> 
  
</div>

高亮/关键词

Docusaurus greenandPinkare my favorite colors.

这是一个高亮段落这是一个高亮段落

这是一个关键词哈哈哈哈

哈哈哈

代码：（需 import {Highlight,Keyword} from '@site/src/components/ForMDX'; ）

<p><Highlight bgColor={MyColor.docusaurusGreen} fontColor={MyColor.white}>Docusaurus green</Highlight>and<Highlight bgColor={MyColor.Pink} fontColor={MyColor.white}>Pink</Highlight>are my favorite colors.</p>
<Highlight>这是一个高亮段落</Highlight>
<Highlight bgColor={MyColor.Blue} fontColor={MyColor.black}>这是一个高亮段落</Highlight> 
<p>这是一个<Keyword>关键词</Keyword>哈哈哈哈</p>哈哈哈

🔁卡片链接

以下是一些页面跳转的卡片式按钮示例，可用于快速导航测试或构建索引页。

1️⃣ 跳转至：测试页5🔗

5️⃣ 跳转至：测试页1🔗

代码：（无需 import ）

<div style={{ display: 'grid', gap: '1rem' }}>
    <Card>
      <a href="/docs/mydoc/testpage5" target="_blank"><strong>1️⃣ 跳转至：</strong>测试页5🔗</a>
    </Card>
	
    <Card>
      <a href="/docs/mydoc/testpage1" target="_blank"><strong>5️⃣ 跳转至：</strong>测试页1🔗</a>
    </Card>
</div>

显示代码行号

int main(){
    Timer_Init();
    OLED_Init();
    while(1){
        Task();
    }
}

代码：

\```c showLineNumbers
int main(){
    Timer_Init();
    OLED_Init();
    while(1){
        Task();
    }
}
\```

显示代码文件名

main.c
int main(){
    Timer_Init();
    OLED_Init();
    while(1){
        Task();
    }
}

代码：

\```c title="main.c"
int main(){
    Timer_Init();
    OLED_Init();
    while(1){
        Task();
    }
}
\```

高亮代码行

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    
    int x = 10;
    int y = 20;
    int sum = x + y;
    
    return 0;
}

代码：

\```c
#include <stdio.h>

int main() {
    \// highlight-next-line
    printf("Hello, World!\n");
    
    \// highlight-start
    int x = 10;
    int y = 20;
    int sum = x + y;
    \// highlight-end
    
    return 0;
}
\```

新增代码标记

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    
    int x = 10;
    int y = 20;
    int sum = x + y;
    
    return 0;
}

代码：

\```c
#include <stdio.h>

int main() {
    \// highlight-add-line
    printf("Hello, World!\n");
    
    \// highlight-add-start
    int x = 10;
    int y = 20;
    int sum = x + y;
    \// highlight-add-end
    
    return 0;
}
\```

更新代码标记

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    
    int x = 10;
    int y = 20;
    int sum = x + y;
    
    return 0;
}

代码：

\```c
#include <stdio.h>

int main() {
    \// highlight-update-line
    printf("Hello, World!\n");
    
    \// highlight-update-start
    int x = 10;
    int y = 20;
    int sum = x + y;
    \// highlight-update-end
    
    return 0;
}
\```

错误代码标记

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    
    int x = 10;
    int y = 20;
    int sum = x + y;
    
    return 0;
}

代码：

\```c
#include <stdio.h>

int main() {
    \// highlight-error-line
    printf("Hello, World!\n");
    
    \// highlight-error-start
    int x = 10;
    int y = 20;
    int sum = x + y;
    \// highlight-error-end
    
    return 0;
}
\```

多语言

JavaScript
Python
Java
C

function helloWorld() {
	console.log('Hello, world!');
}

def hello_world():
	print("Hello, world!")

class HelloWorld {
  public static void main(String args[]) {
  System.out.println("Hello, World");
 }
}

int main() {
	printf("Hello, World!\n");   
	return 0;
}

代码：（需 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';）

<Tabs>

  <TabItem value="js" label="JavaScript">
\```js
function helloWorld() {
	console.log('Hello, world!');
}
\```
  </TabItem>

  <TabItem value="py" label="Python">
\```py
def hello_world():
	print("Hello, world!")
\```
  </TabItem>

  <TabItem value="java" label="Java">
\```java
class HelloWorld {
  public static void main(String args[]) {
  System.out.println("Hello, World");
 }
}
\```
  </TabItem>
  
  <TabItem value="c" label="C">
\```c
int main() {
	printf("Hello, World!\n");   
	return 0;
}
\```
  </TabItem>  
  
</Tabs>

补充说明

在上面的多语言中，value 是唯一且可自定义的，但最好和后面的 label对应。不可出现下面这种情况：

<Tabs>

<TabItem value="bash" label="有密钥">

\```bash
ffmpeg -allowed_extensions ALL -i "index.m3u8" -c copy -bsf:a aac_adtstoasc -hls_key_info_file "index/0.key" "output.mp4"
\```

</TabItem>  
  
<TabItem value="bash" label="无密钥">

\```bash
ffmpeg -i "index.m3u8" -c copy -bsf:a aac_adtstoasc "output.mp4"
\```

</TabItem>   
  
</Tabs>

会报错：

Docusaurus error: Duplicate values "bash" found in <Tabs>. Every value needs to be unique.

少量演示代码可以直接使用上面的多语言模块，但难以维护。使用这个方法基于 CodeBlock 实现 FileBlock 可以解决这个问题，但我还没实现，因为需要用到插件，暂时就先到这儿吧，日后如有需要再研究。

折叠详情组件

Test

example:

int main(){
    while(1){
        
    }
}

代码：

<details>
<summary>Test</summary>

example:
\```c
int main(){
    while(1){
        
    }
}
\```

</details>

插入音频

代码：

<audio controls>
  <source src="/audio/王铮亮-不凡.mp3" type="audio/mpeg" />
  您的浏览器不支持音频播放，请升级或使用其他浏览器。
</audio>

插入视频外链

代码：

<iframe 
  width="100%" 
  height="500" 
  src="https://www.bilibili.com/bangumi/play/ep733316" 
  frameborder="0" 
  allowfullscreen>
</iframe>

小贴士

My Tip

绿色小贴士，用于推荐用法、技巧等场景

Take care

红色危险，用于指示高风险操作、错误操作等场景

My Info

蓝色信息提示，用于补充说明、背景知识等场景

My note

浅灰备注，需要特别注意的内容

My warning

黄色，指示可能有风险的操作

绿色

:::tip[My Tip]

绿色小贴士，用于推荐用法、技巧等场景

:::

红色

:::danger[Take care]

红色危险，用于指示高风险操作、错误操作等场景

:::

蓝色

:::info[My Info]

蓝色信息提示，用于补充说明、背景知识等场景

:::

灰色

:::note[My note]

浅灰备注，需要特别注意的内容

:::

黄色

:::warning[My warning]

黄色，指示可能有风险的操作

:::

同目录跳转

testpage2

[testpage2](./testpage2.md)

不同目录跳转

回想空间

[回想空间](/docs/reflection-space)

插入图片

markdown

This is Sherry

![](./img/Eureka.png "This is Sherry")

jsx

使用jsx：

<img
  src="/img/Eureka.jpg"
  alt="示例图片"
  style={{
    width: '100%',
    maxWidth: '300px',
    height: 'auto',
    display: 'block',
    margin: '0 auto'
  }}
/>

组件（无卡片装饰）

代码：（需import CardImg from '@site/src/components/CardImg';）

<p><CardImg src="/img/example.jpg" alt="示例图1" isCenter={true} /></p>

组件（卡片装饰）

代码：（需import CardImg from '@site/src/components/CardImg';）

<p><CardImg src="/img/example.jpg" alt="示例图2" isCenter={true} isBoxed={true} /></p>

自定义标题

一级标题

二级标题

无序三级标题

1.有序三级标题

绿色字体三级标题

使用方法：（需import { B1, B2, B3, BH3, B3W} from '@site/src/components/ForMDX';）

# <B1>一级标题</B1>
## <B2>二级标题</B2>
### <B3>无序三级标题</B3>
### <BH3>1.</BH3>有序三级标题
### <B3W>绿色字体三级标题</B3W>

上面关于B1、B2等自定义标题的样式可在.src/css/custom.css中修改

📚 参考资料

加载评论中...

本文档全部import：​

🔗 按钮链接​

按钮下载（外链）​

自定义按钮​

高亮/关键词​

🔁卡片链接​

显示代码行号​

显示代码文件名​

高亮代码行​

新增代码标记​

更新代码标记​

错误代码标记​

多语言​

折叠详情组件​

插入音频​

插入视频外链​

小贴士​

绿色​

红色​

蓝色​

灰色​

黄色​

同目录跳转​

不同目录跳转​

插入图片​

markdown​

jsx​

组件（无卡片装饰）​

组件（卡片装饰）​

自定义标题​

一级标题

二级标题​

无序三级标题​

1.有序三级标题​

绿色字体三级标题​

📚 参考资料​

本文档全部import：

🔗 按钮链接

按钮下载（外链）

自定义按钮

高亮/关键词

🔁卡片链接

显示代码行号

显示代码文件名

高亮代码行

新增代码标记

更新代码标记

错误代码标记

多语言

折叠详情组件

插入音频

插入视频外链

小贴士

绿色

红色

蓝色

灰色

黄色

同目录跳转

不同目录跳转

插入图片

markdown

jsx

组件（无卡片装饰）

组件（卡片装饰）

自定义标题

二级标题

无序三级标题

1.有序三级标题

绿色字体三级标题

📚 参考资料