testpage0
All imports in this document:
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';
🔗 Button Link
Code：（No need to import）
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
<a href="https://www.bilibili.com/video/BV12v4y1y7uV" class="source_card_button" target="_blank">📖 STM32 Tutorial</a>
<a href="/docs/reflection-space" class="source_card_button" target="_blank">🌸 reflection-space</a>
<a href="https://e.tb.cn/h.hTZaa83WZiz2Wfr" class="source_card_button" target="_blank">🌽 Decent quality corn</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">📱 Test Group Link</a>
</div>
Download Button (External Link)
Download NowCode：（No need to 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">Download Now</a>
Custom Button
代码：(需 import {Button} from '@site/src/components/ForMDX';)
<div style={{
display: 'flex',
flexDirection: 'column',
rowGap: '1rem'
}}>
{/* First Row Buttons */}
<div style={{ display: 'flex', gap: '1rem' }}>
<Button icon="📘" href="https://example.com">Default Button</Button>
<Button icon="📘" href="https://example.com" color="#2D8E0A">Green Button</Button>
<Button icon="📘" href="https://example.com" color="#1877F2" size="large">The large blue button</Button>
</div>
{/* Second Row Buttons */}
<div style={{ display: 'flex', gap: '1rem' }}>
<Button icon="📘" href="https://example.com">Default Button</Button>
<Button icon="📘" href="#">Button 1</Button>
<Button icon="📘" href="https://github.com/your-repo" color="#333"textColor="white" size="medium">GitHub Repository</Button>
</div>
{/* Third Row Buttons */}
<div style={{ display: 'flex', gap: '1rem' }}>
<Button icon="⚙️" onClick={() => alert('点击了')}>MENU</Button>
<Button loading>Loading...</Button>
<Button disabled>unclickable</Button>
</div>
</div>
Highlight/Key Words
Docusaurus greenandPinkare my favorite colors.
This is a highlighted paragraph This is a highlighted paragraphThis is a keyword Hahaha
HahahaCode: (Requires 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>This is a highlighted paragraph</Highlight>
<Highlight bgColor={MyColor.Blue} fontColor={MyColor.black}>This is a highlighted paragraph</Highlight>
<p>This is a <Keyword>keyword</Keyword> Hahaha</p> Hahaha
🔁Card link
Here are some example card-style buttons for page navigation, which can be used for quick navigation testing or to build index pages.
Code：（No need to import）
<div style={{ display: 'grid', gap: '1rem' }}>
<Card>
<a href="/docs/mydoc/testpage5" target="_blank"><strong>1️⃣ Click to:</strong> Test Page 5🔗</a>
</Card>
<Card>
<a href="/docs/mydoc/testpage1" target="_blank"><strong>5️⃣ Click to:</strong>Test Page 1🔗</a>
</Card>
</div>
<div style={{height: '20px'}}></div>
Show line numbers of the code
int main(){
Timer_Init();
OLED_Init();
while(1){
Task();
}
}
Code：
\```c showLineNumbers
int main(){
Timer_Init();
OLED_Init();
while(1){
Task();
}
}
\```
Show title
main.c
int main(){
Timer_Init();
OLED_Init();
while(1){
Task();
}
}
Code：
\```c title="main.c"
int main(){
Timer_Init();
OLED_Init();
while(1){
Task();
}
}
\```
Highlight the code lines
#include <stdio.h>
int main() {
printf("Hello, World!\n");
int x = 10;
int y = 20;
int sum = x + y;
return 0;
}
Code：
\```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;
}
\```
New code marking
#include <stdio.h>
int main() {
printf("Hello, World!\n");
int x = 10;
int y = 20;
int sum = x + y;
return 0;
}
Code：
\```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;
}
\```
Update code marking
#include <stdio.h>
int main() {
printf("Hello, World!\n");
int x = 10;
int y = 20;
int sum = x + y;
return 0;
}
Code：
\```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;
}
\```
Error code marking
#include <stdio.h>
int main() {
printf("Hello, World!\n");
int x = 10;
int y = 20;
int sum = x + y;
return 0;
}
Code：
\```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;
}
\```
Multi-Language
- 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;
}
Code：（Requires 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>
Reinforcement
In the above multilingual version, value is the sole and customizable element, but it is recommended to match it with the subsequent label. The following situation should not occur:
<Tabs>
<TabItem value="bash" label="With Secret Key">
\```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="Without Secret Key">
\```bash
ffmpeg -i "index.m3u8" -c copy -bsf:a aac_adtstoasc "output.mp4"
\```
</TabItem>
</Tabs>
An error will occur:
Docusaurus error: Duplicate values "bash" found in
<Tabs>. Every value needs to be unique.
A small amount of demonstration code can be directly used with the above multilingual module, but it is difficult to maintain. Using this method implementing FileBlock based on CodeBlock can solve this problem, but I haven't implemented it yet because it requires plugins. Let's stop here for now. We'll continue to explore if there's a need in the future.
Collapsible Detail Component
Test
example:
int main(){
while(1){
}
}
Code：
<details>
<summary>Test</summary>
example:
\```c
int main(){
while(1){
}
}
\```
</details>
Insert Audio
Code：
<audio controls>
<source src="/audio/王铮亮-不凡.mp3" type="audio/mpeg" />
Your browser does not support audio playback. Please upgrade your browser or use another one.
</audio>
Insert Video URL
Code:
<iframe
width="100%"
height="500"
src="https://www.bilibili.com/bangumi/play/ep733316"
frameborder="0"
allowfullscreen>
</iframe>
Tips
My Tip
Green Tip, used for recommending usage, techniques, etc. scenarios
Take care
Red danger, used to indicate scenarios such as high-risk operations, incorrect operations, etc.
My Info
Blue information prompt, used for supplementary explanations, background knowledge, and other scenarios
My note
Light gray note: Content requiring special attention
My warning
Yellow indicates that the operation may be risky.
Green
:::tip[My Tip]
Green Tip, used for recommending usage, techniques, etc. scenarios
:::
Red
:::danger[Take care]
Red danger, used to indicate scenarios such as high-risk operations, incorrect operations, etc.
:::
Blue
:::info[My Info]
Blue information prompt, used for supplementary explanations, background knowledge, and other scenarios
:::
Gray
:::note[My note]
Light gray note: Content requiring special attention
:::
Yellow
:::warning[My warning]
Yellow indicates that the operation may be risky.
:::
Same-directory Navigation
[testpage2](./testpage2.md)
Cross-directory Navigation
[reflection-space](/docs/reflection-space)
illustrate
markdown
jsx
使用jsx：
<img
src="/img/Eureka.jpg"
alt="example pic"
style={{
width: '100%',
maxWidth: '300px',
height: 'auto',
display: 'block',
margin: '0 auto'
}}
/>
PlainComponent
Code:（Requiresimport CardImg from '@site/src/components/CardImg';）
<p><CardImg src="/img/example.jpg" alt="example-pic1" isCenter={true} /></p>
CardComponent
Code:（Requiresimport CardImg from '@site/src/components/CardImg';）
<p><CardImg src="/img/example.jpg" alt="example-pic2" isCenter={true} isBoxed={true} /></p>
Custom Title
First Level Heading
Second Level Heading
Unordered Third Level Heading
1. Ordered Third Level Heading
Third Level Heading in Green Font
Code:（Requiresimport { B1, B2, B3, BH3, B3W} from '@site/src/components/ForMDX';）
## Custom Title
# <B1>First Level Heading</B1>
## <B2>Second Level Heading</B2>
### <B3>Unordered Third Level Heading</B3>
### <BH3>1.</BH3> Ordered Third Level Heading
### <B3W>Third Level Heading in Green Font</B3W>
The styles for custom titles such as B1 and B2 can be modified in the file .src/css/custom.css.
📚 References
加载评论中...