docs: add default value for BrowserWindow URL field (#6207)

* docs: fix BrowserWindow URL field

* fix
This commit is contained in:
Joshua Chen 2021-12-28 15:19:23 +08:00 committed by GitHub
parent c8fad02029
commit 6a772828c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 56 additions and 29 deletions

View file

@ -5,39 +5,45 @@ description: Handling admonitions/callouts in Docusaurus Markdown
slug: /markdown-features/admonitions
---
import BrowserWindow from '@site/src/components/BrowserWindow';
In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.
Example:
:::note
```md
:::note
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::
:::tip
:::tip
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::
:::info
:::info
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::
:::caution
:::caution
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::
:::danger
:::danger
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::
```
<BrowserWindow>
:::note
@ -69,6 +75,8 @@ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
</BrowserWindow>
## Usage with Prettier {#usage-with-prettier}
If you use [Prettier](https://prettier.io) to format your Markdown files, Prettier might autoformat your code to invalid admonition syntax. To avoid this problem, add empty lines around the starting and ending directives. This is also why the examples we show here all have empty lines around the content.
@ -95,11 +103,15 @@ Hello world
You may also specify an optional title
:::note Your Title
```md
:::note Your Title
Some **content** with _markdown_ `syntax`.
Some **content** with _markdown_ `syntax`.
:::
:::
```
<BrowserWindow>
:::note Your Title
@ -107,6 +119,8 @@ Some **content** with _markdown_ `syntax`.
:::
</BrowserWindow>
## Admonitions with MDX
You can use MDX inside admonitions too!
@ -175,7 +189,6 @@ The types that are accepted are the same as above: `note`, `tip`, `danger`, `inf
```mdx-code-block
import Admonition from '@theme/Admonition';
import BrowserWindow from '@site/src/components/BrowserWindow';
<BrowserWindow>
<Admonition type="tip" icon="💡" title="Did you know...">

View file

@ -64,7 +64,7 @@ export const Highlight = ({children, color}) => (
</span>
);
<BrowserWindow minHeight={240} url="http://localhost:3000">
<BrowserWindow minHeight={240}>
<Highlight color="#25c2a0">Docusaurus green</Highlight>
{` `}and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
@ -107,7 +107,7 @@ import MyComponentSource from '!!raw-loader!./myComponent';
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';
<BrowserWindow url="http://localhost:3000">
<BrowserWindow>
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
@ -157,7 +157,7 @@ import PartialExample from './_markdown-partial-example.mdx';
```mdx-code-block
import PartialExample from './_markdown-partial-example.mdx';
<BrowserWindow url="http://localhost:3000">
<BrowserWindow>
<PartialExample name="Sebastien" />
</BrowserWindow>