mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-21 04:57:05 +02:00
fix(v2): examples should use Node 14 by default on CodeSandbox + regen with alpha72 (#4574)
* codesandbox: use node 14 by default * Regenerate examples * Add example json files to prettierrignore
This commit is contained in:
parent
44029128fa
commit
3bcd0a6ab1
28 changed files with 1790 additions and 1601 deletions
128
examples/classic/docs/markdown-features.mdx
Normal file
128
examples/classic/docs/markdown-features.mdx
Normal file
|
@ -0,0 +1,128 @@
|
|||
---
|
||||
title: Markdown Features
|
||||
---
|
||||
|
||||
Docusaurus supports the [Markdown](https://daringfireball.net/projects/markdown/syntax) syntax and has some additional features.
|
||||
|
||||
## Front Matter
|
||||
|
||||
Markdown documents can have associated metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
|
||||
|
||||
```md
|
||||
---
|
||||
id: my-doc
|
||||
title: My document title
|
||||
description: My document description
|
||||
sidebar_label: My doc
|
||||
---
|
||||
|
||||
Markdown content
|
||||
```
|
||||
|
||||
## Markdown links
|
||||
|
||||
Regular Markdown links are supported using url paths or relative file paths.
|
||||
|
||||
```md
|
||||
Let's see how to [Create a page](/create-a-page).
|
||||
```
|
||||
|
||||
```md
|
||||
Let's see how to [Create a page](./create-a-page.md).
|
||||
```
|
||||
|
||||
Let's see how to [Create a page](./create-a-page.md).
|
||||
|
||||
## Markdown images
|
||||
|
||||
Regular Markdown images are supported.
|
||||
|
||||
Add an image at `static/img/docusaurus.png` and use this Markdown declaration:
|
||||
|
||||
```md
|
||||

|
||||
```
|
||||
|
||||

|
||||
|
||||
## Code Blocks
|
||||
|
||||
Markdown code blocks are supported with Syntax highlighting.
|
||||
|
||||
```jsx title="src/components/HelloDocusaurus.js"
|
||||
function HelloDocusaurus() {
|
||||
return (
|
||||
<h1>Hello, Docusaurus!</h1>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```jsx title="src/components/HelloDocusaurus.js"
|
||||
function HelloDocusaurus() {
|
||||
return <h1>Hello, Docusaurus!</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
## Admonitions
|
||||
|
||||
Docusaurus has a special syntax to create admonitions and callouts:
|
||||
|
||||
:::tip My tip
|
||||
|
||||
Use this awesome feature option
|
||||
|
||||
:::
|
||||
|
||||
:::danger Take care
|
||||
|
||||
This action is dangerous
|
||||
|
||||
:::
|
||||
|
||||
:::tip My tip
|
||||
|
||||
Use this awesome feature option
|
||||
|
||||
:::
|
||||
|
||||
:::danger Take care
|
||||
|
||||
This action is dangerous
|
||||
|
||||
:::
|
||||
|
||||
## React components
|
||||
|
||||
Thanks to [MDX](https://mdxjs.com/), you can make your doc more interactive and use React components inside Markdown:
|
||||
|
||||
```jsx
|
||||
export const Highlight = ({children, color}) => (
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
borderRadius: '2px',
|
||||
color: 'red',
|
||||
padding: '0.2rem',
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
|
||||
```
|
||||
|
||||
export const Highlight = ({children, color}) => (
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
borderRadius: '2px',
|
||||
color: '#fff',
|
||||
padding: '0.2rem',
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
|
||||
Facebook blue
|
||||
</Highlight> are my favorite colors.
|
Loading…
Add table
Add a link
Reference in a new issue