mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-03 12:17:20 +02:00
docs(v2): escape more jsx in mdx files for Crowdin (#4285)
This commit is contained in:
parent
96e1b1e269
commit
cc42cf5af7
5 changed files with 50 additions and 0 deletions
|
@ -396,6 +396,7 @@ class HelloWorld {
|
|||
|
||||
And you will get the following:
|
||||
|
||||
````mdx-code-block
|
||||
<Tabs
|
||||
defaultValue="js"
|
||||
values={[
|
||||
|
@ -433,6 +434,7 @@ class HelloWorld {
|
|||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
````
|
||||
|
||||
You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.
|
||||
|
||||
|
|
|
@ -21,6 +21,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
<TOCInline toc={toc} />;
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
<BrowserWindow>
|
||||
|
@ -28,6 +29,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
<TOCInline toc={toc} />
|
||||
|
||||
</BrowserWindow>
|
||||
```
|
||||
|
||||
## Custom table of contents
|
||||
|
||||
|
@ -54,11 +56,13 @@ import TOCInline from '@theme/TOCInline';
|
|||
/>;
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<BrowserWindow>
|
||||
|
||||
<TOCInline toc={[toc[2], toc[4]]} />
|
||||
|
||||
</BrowserWindow>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@ import TabItem from '@theme/TabItem';
|
|||
|
||||
And you will get the following:
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
defaultValue="apple"
|
||||
values={[
|
||||
|
@ -41,6 +42,7 @@ And you will get the following:
|
|||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
|
@ -78,6 +80,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -99,6 +102,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
|
|||
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
|
||||
<TabItem value="mac">Use Command + V to paste.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.
|
||||
|
||||
|
@ -117,6 +121,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -129,6 +134,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
|
|||
<TabItem value="mac">I am macOS.</TabItem>
|
||||
<TabItem value="linux">I am Linux.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
@ -160,6 +166,7 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -181,6 +188,7 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
<TabItem value="win">Windows is windows.</TabItem>
|
||||
<TabItem value="unix">Unix is unix.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
## Customizing tabs
|
||||
|
||||
|
@ -204,6 +212,7 @@ import TabItem from '@theme/TabItem';
|
|||
</Tabs>;
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
className="unique-tabs"
|
||||
defaultValue="apple"
|
||||
|
@ -216,3 +225,4 @@ import TabItem from '@theme/TabItem';
|
|||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
|
|
@ -65,6 +65,7 @@ The headers are well-spaced so that the hierarchy is clear.
|
|||
|
||||
This will render in the browser as follows:
|
||||
|
||||
```mdx-code-block
|
||||
import BrowserWindow from '@site/src/components/BrowserWindow';
|
||||
|
||||
<BrowserWindow url="http://localhost:3000">
|
||||
|
@ -90,6 +91,7 @@ The headers are well-spaced so that the hierarchy is clear.
|
|||
- multiple times
|
||||
|
||||
</BrowserWindow>
|
||||
```
|
||||
|
||||
## Markdown headers
|
||||
|
||||
|
@ -286,6 +288,7 @@ import TabItem from '@theme/TabItem';
|
|||
|
||||
And you will get the following:
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
defaultValue="apple"
|
||||
values={[
|
||||
|
@ -297,6 +300,7 @@ And you will get the following:
|
|||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
|
@ -334,6 +338,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -355,6 +360,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
|
|||
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
|
||||
<TabItem value="mac">Use Command + V to paste.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.
|
||||
|
||||
|
@ -373,6 +379,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -385,6 +392,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
|
|||
<TabItem value="mac">I am macOS.</TabItem>
|
||||
<TabItem value="linux">I am Linux.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
@ -416,6 +424,7 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -437,6 +446,7 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
<TabItem value="win">Windows is windows.</TabItem>
|
||||
<TabItem value="unix">Unix is unix.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### Customizing tabs
|
||||
|
||||
|
@ -936,6 +946,7 @@ class HelloWorld {
|
|||
|
||||
And you will get the following:
|
||||
|
||||
````mdx-code-block
|
||||
<Tabs
|
||||
defaultValue="js"
|
||||
values={[
|
||||
|
@ -973,6 +984,7 @@ class HelloWorld {
|
|||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
````
|
||||
|
||||
You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.
|
||||
|
||||
|
@ -1050,11 +1062,13 @@ or
|
|||
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<a
|
||||
target="_blank"
|
||||
href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
|
||||
Download this PDF
|
||||
</a>
|
||||
```
|
||||
|
||||
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
|
||||
|
||||
|
|
|
@ -65,6 +65,7 @@ The headers are well-spaced so that the hierarchy is clear.
|
|||
|
||||
This will render in the browser as follows:
|
||||
|
||||
```mdx-code-block
|
||||
import BrowserWindow from '@site/src/components/BrowserWindow';
|
||||
|
||||
<BrowserWindow url="http://localhost:3000">
|
||||
|
@ -90,6 +91,7 @@ The headers are well-spaced so that the hierarchy is clear.
|
|||
- multiple times
|
||||
|
||||
</BrowserWindow>
|
||||
```
|
||||
|
||||
## Markdown headers
|
||||
|
||||
|
@ -286,6 +288,7 @@ import TabItem from '@theme/TabItem';
|
|||
|
||||
And you will get the following:
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
defaultValue="apple"
|
||||
values={[
|
||||
|
@ -297,6 +300,7 @@ And you will get the following:
|
|||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
|
@ -334,6 +338,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -355,6 +360,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
|
|||
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
|
||||
<TabItem value="mac">Use Command + V to paste.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.
|
||||
|
||||
|
@ -373,6 +379,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -385,6 +392,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
|
|||
<TabItem value="mac">I am macOS.</TabItem>
|
||||
<TabItem value="linux">I am Linux.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
@ -416,6 +424,7 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
|
@ -437,6 +446,7 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
<TabItem value="win">Windows is windows.</TabItem>
|
||||
<TabItem value="unix">Unix is unix.</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### Customizing tabs
|
||||
|
||||
|
@ -460,6 +470,7 @@ import TabItem from '@theme/TabItem';
|
|||
</Tabs>;
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs
|
||||
className="unique-tabs"
|
||||
defaultValue="apple"
|
||||
|
@ -472,6 +483,7 @@ import TabItem from '@theme/TabItem';
|
|||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
## Inline table of contents
|
||||
|
||||
|
@ -489,6 +501,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
<TOCInline toc={toc} />;
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
<BrowserWindow>
|
||||
|
@ -496,6 +509,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
<TOCInline toc={toc} />
|
||||
|
||||
</BrowserWindow>
|
||||
```
|
||||
|
||||
### Custom table of contents
|
||||
|
||||
|
@ -522,11 +536,13 @@ import TOCInline from '@theme/TOCInline';
|
|||
/>;
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<BrowserWindow>
|
||||
|
||||
<TOCInline toc={[toc[3], toc[4]]} />
|
||||
|
||||
</BrowserWindow>
|
||||
```
|
||||
|
||||
## Callouts/admonitions
|
||||
|
||||
|
@ -991,6 +1007,7 @@ class HelloWorld {
|
|||
|
||||
And you will get the following:
|
||||
|
||||
````mdx-code-block
|
||||
<Tabs
|
||||
defaultValue="js"
|
||||
values={[
|
||||
|
@ -1028,6 +1045,7 @@ class HelloWorld {
|
|||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
````
|
||||
|
||||
You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.
|
||||
|
||||
|
@ -1105,11 +1123,13 @@ or
|
|||
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
<a
|
||||
target="_blank"
|
||||
href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
|
||||
Download this PDF
|
||||
</a>
|
||||
```
|
||||
|
||||
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue