mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-03 16:59:06 +02:00
docs: various fixes and improvements (#3546)
This commit is contained in:
parent
2e9854964d
commit
9134b1396b
59 changed files with 230 additions and 225 deletions
|
@ -282,7 +282,7 @@ import TabItem from '@theme/TabItem';
|
|||
</Tabs>;
|
||||
```
|
||||
|
||||
will result in
|
||||
And you will get the following:
|
||||
|
||||
<Tabs
|
||||
defaultValue="apple"
|
||||
|
@ -848,46 +848,48 @@ Instead of implementing a dedicated component for multi-language support code bl
|
|||
|
||||
The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block is **intentional**. This is a current limitation of MDX, you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX.
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
````jsx
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
<Tabs
|
||||
defaultValue="js"
|
||||
values={[
|
||||
{ label: 'JavaScript', value: 'js', },
|
||||
{ label: 'Python', value: 'py', },
|
||||
{ label: 'Java', value: 'java', },
|
||||
]
|
||||
}>
|
||||
<TabItem value="js">
|
||||
<Tabs
|
||||
defaultValue="js"
|
||||
values={[
|
||||
{ label: 'JavaScript', value: 'js', },
|
||||
{ label: 'Python', value: 'py', },
|
||||
{ label: 'Java', value: 'java', },
|
||||
]
|
||||
}>
|
||||
<TabItem value="js">
|
||||
|
||||
```js
|
||||
function helloWorld() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
```js
|
||||
function helloWorld() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="py">
|
||||
</TabItem>
|
||||
<TabItem value="py">
|
||||
|
||||
```py
|
||||
def hello_world():
|
||||
print 'Hello, world!'
|
||||
```
|
||||
```py
|
||||
def hello_world():
|
||||
print 'Hello, world!'
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="java">
|
||||
</TabItem>
|
||||
<TabItem value="java">
|
||||
|
||||
```java
|
||||
class HelloWorld {
|
||||
public static void main(String args[]) {
|
||||
System.out.println("Hello, World");
|
||||
}
|
||||
}
|
||||
```
|
||||
```java
|
||||
class HelloWorld {
|
||||
public static void main(String args[]) {
|
||||
System.out.println("Hello, World");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
````
|
||||
|
||||
And you will get the following:
|
||||
|
||||
|
@ -935,7 +937,7 @@ If you have multiple of these multi-language code tabs, and you want to sync the
|
|||
|
||||
## Assets
|
||||
|
||||
Sometimes you want to link to static assets directly from markdown files, and it is convenient to co-locate the asset next to the markdown file using it.
|
||||
Sometimes you want to link to static assets directly from Markdown files, and it is convenient to co-locate the asset next to the markdown file using it.
|
||||
|
||||
We have setup Webpack loaders to handle most common file types, so that when you import a file, you get its url, and the asset is automatically copied to the output folder.
|
||||
|
||||
|
@ -955,7 +957,7 @@ Let's imagine the following file structure:
|
|||
You can use images in Markdown, or by requiring them and using a JSX image tag:
|
||||
|
||||
```mdx
|
||||
# My markdown page
|
||||
# My Markdown page
|
||||
|
||||
<img src={require('./assets/docusaurus-asset-example-banner.png').default} />
|
||||
|
||||
|
@ -967,7 +969,7 @@ or
|
|||
The ES imports syntax also works:
|
||||
|
||||
```mdx
|
||||
# My markdown page
|
||||
# My Markdown page
|
||||
|
||||
import myImageUrl from './assets/docusaurus-asset-example-banner.png';
|
||||
|
||||
|
@ -986,29 +988,29 @@ If you are using [@docusaurus/plugin-ideal-image](./using-plugins.md#docusaurusp
|
|||
|
||||
### Files
|
||||
|
||||
In the same way, you can link to existing assets by requiring them and using the returned url in videos, links etc...
|
||||
In the same way, you can link to existing assets by requiring them and using the returned url in videos, links etc.
|
||||
|
||||
```mdx
|
||||
# My markdown page
|
||||
# My Markdown page
|
||||
|
||||
<a
|
||||
target="_blank"
|
||||
href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
|
||||
Download this PDF !!!
|
||||
Download this PDF
|
||||
</a>
|
||||
|
||||
or
|
||||
|
||||
[Download this PDF using Markdown !!!](./assets/docusaurus-asset-example-pdf.pdf)
|
||||
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
|
||||
```
|
||||
|
||||
<a
|
||||
target="_blank"
|
||||
href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
|
||||
Download this PDF !!!
|
||||
Download this PDF
|
||||
</a>
|
||||
|
||||
[Download this PDF using Markdown !!!](./assets/docusaurus-asset-example-pdf.pdf)
|
||||
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
|
||||
|
||||
### Inline SVGs
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue