3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-03 00:39:45 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: various fixes and improvements (#3546)

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-10-07 13:39:47 +03:00 • committed by GitHub
parent 2e9854964d
commit 9134b1396b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
59 changed files with 230 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

88
website/docs/markdown-features.mdx
View file

@ -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