Skip to content

Commit fe177cd

Browse files
SoonIterCopilot
SoonIter
and
Copilot
authored
docs(mdx): add markdown container part (#2467)
Co-authored-by: Copilot <[email protected]>
1 parent 52a3eec commit fe177cd

File tree

6 files changed

+322
-246
lines changed

6 files changed

+322
-246
lines changed

‎packages/document/docs/en/guide/basic/use-mdx/_meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["link", "components"]
1+
["link", "components", "container"]

‎packages/document/docs/en/guide/basic/use-mdx/container.mdx‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
# Container
2+
3+
Containers are a great way to mark important information and provide hints to users.
4+
5+
:::tip
6+
Rspress provides two styles of syntax, [`:::` syntax](#three-colon-syntax) and [GitHub Markdown Alerts syntax](#github-markdown-alerts-syntax).
7+
:::
8+
9+
## `:::` Syntax \{#three-colon-syntax}
10+
11+
You can use the `:::` syntax to create custom containers and support custom titles. For example:
12+
13+
import { Tabs, Tab } from '@theme';
14+
15+
<Tabs>
16+
17+
<Tab label="Rendered Result">
18+
19+
:::note
20+
This is a `block` of type `note`
21+
:::
22+
23+
:::tip
24+
This is a `block` of type `tip`
25+
:::
26+
27+
:::info
28+
This is a `block` of type `info`
29+
:::
30+
31+
:::warning
32+
This is a `block` of type `warning`
33+
:::
34+
35+
:::danger
36+
This is a `block` of type `danger`
37+
:::
38+
39+
:::details
40+
This is a `block` of type `details`
41+
:::
42+
43+
:::tip Custom Title
44+
This is a `block` of `Custom Title`
45+
:::
46+
47+
:::tip\{title="Custom Title"}
48+
This is a `block` of `Custom Title`
49+
:::
50+
51+
</Tab>
52+
53+
<Tab label="Syntax">
54+
55+
```markdown
56+
:::note
57+
This is a `block` of type `note`
58+
:::
59+
60+
:::tip
61+
This is a `block` of type `tip`
62+
:::
63+
64+
:::info
65+
This is a `block` of type `info`
66+
:::
67+
68+
:::warning
69+
This is a `block` of type `warning`
70+
:::
71+
72+
:::danger
73+
This is a `block` of type `danger`
74+
:::
75+
76+
:::details
77+
This is a `block` of type `details`
78+
:::
79+
80+
:::tip Custom Title
81+
This is a `block` of `Custom Title`
82+
:::
83+
84+
:::tip{title="Custom Title"}
85+
This is a `block` of `Custom Title`
86+
:::
87+
```
88+
89+
</Tab>
90+
91+
</Tabs>
92+
93+
:::warning
94+
95+
We recommend using the syntax `:::tip Custom Title` directly.
96+
97+
When using the `:::` syntax in `.mdx` files and customizing headings with curly braces syntax, be aware of escaping.
98+
99+
```mdx
100+
:::tip\{title="Custom Title"}
101+
102+
This is a `block` of `Custom Title`
103+
104+
:::
105+
```
106+
107+
:::
108+
109+
## GitHub Markdown alerts syntax \{#github-markdown-alerts-syntax}
110+
111+
You can use [GitHub Markdown Alerts Syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) to create custom containers.
112+
113+
<Tabs>
114+
115+
<Tab label="Rendered Result">
116+
117+
> [!NOTE]
118+
> This is a `block` of type `note`
119+
120+
> [!TIP]
121+
> This is a `block` of type `tip`
122+
123+
> [!INFO]
124+
> This is a `block` of type `info`
125+
126+
> [!WARNING]
127+
> This is a `block` of type `warning`
128+
129+
> [!DANGER]
130+
> This is a `block` of type `danger`
131+
132+
> [!DETAILS]
133+
> This is a `block` of type `details`
134+
135+
</Tab>
136+
137+
<Tab label="Syntax">
138+
139+
```markdown
140+
> [!NOTE]
141+
> This is a `block` of type `note`
142+
143+
> [!TIP]
144+
> This is a `block` of type `tip`
145+
146+
> [!INFO]
147+
> This is a `block` of type `info`
148+
149+
> [!WARNING]
150+
> This is a `block` of type `warning`
151+
152+
> [!DANGER]
153+
> This is a `block` of type `danger`
154+
155+
> [!DETAILS]
156+
> This is a `block` of type `details`
157+
```
158+
159+
</Tab>
160+
161+
</Tabs>

‎packages/document/docs/en/guide/basic/use-mdx/index.mdx‎

Lines changed: 0 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -84,128 +84,6 @@ The previously defined properties will be passed to the component as `frontmatte
8484
See [Front matter config](/api/config/config-frontmatter) for available front matter configurations.
8585
:::
8686

87-
## Custom container
88-
89-
### `:::` Syntax
90-
91-
You can use the `:::` syntax to create custom containers and support custom titles. For example:
92-
93-
**Input:**
94-
95-
```markdown
96-
:::note
97-
This is a `block` of type `note`
98-
:::
99-
100-
:::tip
101-
This is a `block` of type `tip`
102-
:::
103-
104-
:::info
105-
This is a `block` of type `info`
106-
:::
107-
108-
:::warning
109-
This is a `block` of type `warning`
110-
:::
111-
112-
:::danger
113-
This is a `block` of type `danger`
114-
:::
115-
116-
:::details
117-
This is a `block` of type `details`
118-
:::
119-
120-
:::tip Custom Title
121-
This is a `block` of `Custom Title`
122-
:::
123-
124-
:::tip{title="Custom Title"}
125-
This is a `block` of `Custom Title`
126-
:::
127-
```
128-
129-
**Output:**
130-
131-
:::note
132-
This is a `block` of type `note`
133-
:::
134-
135-
:::tip
136-
This is a `block` of type `tip`
137-
:::
138-
139-
:::info
140-
This is a `block` of type `info`
141-
:::
142-
143-
:::warning
144-
This is a `block` of type `warning`
145-
:::
146-
147-
:::danger
148-
This is a `block` of type `danger`
149-
:::
150-
151-
:::details
152-
This is a `block` of type `details`
153-
:::
154-
155-
:::tip Custom Title
156-
This is a `block` of `Custom Title`
157-
:::
158-
159-
:::tip{title="Custom Title"}
160-
This is a `block` of `Custom Title`
161-
:::
162-
163-
### GitHub Markdown alerts syntax
164-
165-
You can also use [GitHub Markdown Alerts Syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) to create custom containers.
166-
167-
**Input:**
168-
169-
```markdown
170-
> [!NOTE]
171-
> This is a `block` of type `note`
172-
173-
> [!TIP]
174-
> This is a `block` of type `tip`
175-
176-
> [!INFO]
177-
> This is a `block` of type `info`
178-
179-
> [!WARNING]
180-
> This is a `block` of type `warning`
181-
182-
> [!DANGER]
183-
> This is a `block` of type `danger`
184-
185-
> [!DETAILS]
186-
> This is a `block` of type `details`
187-
```
188-
189-
**Output:**
190-
191-
> [!NOTE]
192-
> This is a `block` of type `note`
193-
194-
> [!TIP]
195-
> This is a `block` of type `tip`
196-
197-
> [!INFO]
198-
> This is a `block` of type `info`
199-
200-
> [!WARNING]
201-
> This is a `block` of type `warning`
202-
203-
> [!DANGER]
204-
> This is a `block` of type `danger`
205-
206-
> [!DETAILS]
207-
> This is a `block` of type `details`
208-
20987
## Code block
21088

21189
### Basic usage

‎packages/document/docs/zh/guide/basic/use-mdx/_meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["link", "components"]
1+
["link", "components", "container"]

0 commit comments

Comments
 (0)