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

chore: prepare v2.0.0-beta.16 release (#6760)

Browse source
This commit is contained in:
Sébastien Lorber 2022-02-25 16:00:11 +01:00 • committed by GitHub
parent 17b8eded79
commit 124511f445
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
142 changed files with 6743 additions and 4173 deletions
Download patch file Download diff file Expand all files Collapse all files

117
website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-intro.mdx Normal file
View file

@ -0,0 +1,117 @@
---
id: introduction
title: Markdown Features
sidebar_label: Introduction
description: Docusaurus uses GitHub Flavored Markdown (GFM). Find out more about Docusaurus-specific features when writing Markdown.
slug: /markdown-features
---
import BrowserWindow from '@site/src/components/BrowserWindow';
Documentation is one of your product's interfaces with your users. A well-written and well-organized set of docs helps your users understand your product quickly. Our aligned goal here is to help your users find and understand the information they need, as quickly as possible.
Docusaurus 2 uses modern tooling to help you compose your interactive documentation with ease. You may embed React components, or build live coding blocks where your users may play with the code on the spot. Start sharing your eureka moments with the code your audience cannot walk away from. It is perhaps the most effective way of attracting potential users.
:::important
This section assumes you are using the official Docusaurus content plugins.
:::
## Standard features {#standard-features}
Markdown is a syntax that enables you to write formatted content in a readable syntax.
The [standard Markdown syntax](https://daringfireball.net/projects/markdown/syntax) is supported, and we use [MDX](https://mdxjs.com/) as the parsing engine, which can do much more than just parsing Markdown, like rendering React components inside your documents.
```md
### My Doc Section
Hello world message with some **bold** text, some _italic_ text, and a [link](/)
![img alt](/img/docusaurus.png)
```
```mdx-code-block
<BrowserWindow>
<h2>My Doc Section</h2>
Hello world message with some **bold** text, some _italic_ text and a [link](/)
![img alt](/img/docusaurus.png)
</BrowserWindow>
```
## Quotes {#quotes}
Markdown quotes are beautifully styled:
```md
> Easy to maintain open source documentation websites.
>
> — Docusaurus
```
<BrowserWindow>
> Easy to maintain open source documentation websites.
>
> — Docusaurus
</BrowserWindow>
## Details {#details}
Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) HTML elements are beautifully styled:
```md
### Details element example
<details>
<summary>Toggle me!</summary>
<div>
<div>This is the detailed content</div>
<br/>
<details>
<summary>
Nested toggle! Some surprise inside...
</summary>
<div>
😲😲😲😲😲
</div>
</details>
</div>
</details>
```
```mdx-code-block
<BrowserWindow>
<h3>Details element example</h3>
<details>
<summary>Toggle me!</summary>
<div>
<div>This is the detailed content</div>
<br/>
<details>
<summary>
Nested toggle! Some surprise inside...
</summary>
<div>
😲😲😲😲😲
</div>
</details>
</div>
</details>
</BrowserWindow>
```
:::note
In practice, those are not really HTML elements, but React JSX elements, which we'll cover next!
:::