mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-03 16:59:06 +02:00
docs(v2): use explicit heading IDs (#4460)
This commit is contained in:
Alexey Pyltsyn
GitHub
parent
962c3748ea
commit
291a72fbae
162 changed files with 1435 additions and 1435 deletions
|
|
@ -69,7 +69,7 @@ Danger danger, mayday!
|
|||
|
||||
:::
|
||||
|
||||
## Specifying title
|
||||
## Specifying title {#specifying-title}
|
||||
|
||||
You may also specify an optional title
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ Let's imagine the following file structure:
|
|||
/website/docs/assets/docusaurus-asset-example-pdf.pdf
|
||||
```
|
||||
|
||||
## Images
|
||||
## Images {#images}
|
||||
|
||||
You can use images in Markdown, or by requiring them and using a JSX image tag:
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ If you are using [@docusaurus/plugin-ideal-image](../../using-plugins.md#docusau
|
|||
|
||||
:::
|
||||
|
||||
## Files
|
||||
## Files {#files}
|
||||
|
||||
In the same way, you can link to existing assets by requiring them and using the returned url in videos, links etc.
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ or
|
|||
|
||||
[Download this PDF using Markdown](../../assets/docusaurus-asset-example-pdf.pdf)
|
||||
|
||||
## Inline SVGs
|
||||
## Inline SVGs {#inline-svgs}
|
||||
|
||||
Docusaurus supports inlining SVGs out of the box.
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
|
|||
|
||||
<DocusaurusSvg className="themedDocusaurus" />
|
||||
|
||||
## Themed Images
|
||||
## Themed Images {#themed-images}
|
||||
|
||||
Docusaurus supports themed images: the `ThemedImage` component (included in the classic/bootstrap themes) allows you to switch the image source based on the current theme.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ slug: /markdown-features/code-blocks
|
|||
|
||||
Code blocks within documentation are super-powered 💪.
|
||||
|
||||
## Code title
|
||||
## Code title {#code-title}
|
||||
|
||||
You can add a title to the code block by adding `title` key after the language (leave a space between them).
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ function HelloCodeTitle(props) {
|
|||
}
|
||||
```
|
||||
|
||||
## Syntax highlighting
|
||||
## Syntax highlighting {#syntax-highlighting}
|
||||
|
||||
Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out [this reference](https://github.com/mdx-js/specification) for specifications of MDX.
|
||||
|
||||
|
|
@ -95,7 +95,7 @@ const prismIncludeLanguages = (Prism) => {
|
|||
|
||||
You can refer to [Prism's official language definitions](https://github.com/PrismJS/prism/tree/master/components) when you are writing your own language definitions.
|
||||
|
||||
## Line highlighting
|
||||
## Line highlighting {#line-highlighting}
|
||||
|
||||
You can bring emphasis to certain lines of code by specifying line ranges after the language meta string (leave a space after the language).
|
||||
|
||||
|
|
@ -220,7 +220,7 @@ Supported commenting syntax:
|
|||
|
||||
If there's a syntax that is not currently supported, we are open to adding them! Pull requests welcome.
|
||||
|
||||
## Interactive code editor
|
||||
## Interactive code editor {#interactive-code-editor}
|
||||
|
||||
(Powered by [React Live](https://github.com/FormidableLabs/react-live))
|
||||
|
||||
|
|
@ -292,7 +292,7 @@ function Clock(props) {
|
|||
}
|
||||
```
|
||||
|
||||
### Imports
|
||||
### Imports {#imports}
|
||||
|
||||
:::caution react-live and imports
|
||||
|
||||
|
|
@ -345,7 +345,7 @@ function MyPlayground(props) {
|
|||
}
|
||||
```
|
||||
|
||||
## Multi-language support code blocks
|
||||
## Multi-language support code blocks {#multi-language-support-code-blocks}
|
||||
|
||||
With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switching between them using a tabs component.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Using Markdown headings
|
|||
slug: /markdown-features/headings
|
||||
---
|
||||
|
||||
## Markdown headings
|
||||
## Markdown headings {#markdown-headings}
|
||||
|
||||
You can use regular Markdown headings.
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ You can use regular Markdown headings.
|
|||
|
||||
Markdown headings appear as a table-of-contents entry.
|
||||
|
||||
## Heading ids
|
||||
## Heading ids {#heading-ids}
|
||||
|
||||
Each heading has an id that can be automatically generated, or explicitly specified.
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ Heading ids allow you to link to a specific document heading in Markdown or JSX:
|
|||
<Link to="#heading-id">link</Link>
|
||||
```
|
||||
|
||||
### Generated ids
|
||||
### Generated ids {#generated-ids}
|
||||
|
||||
By default, Docusaurus will generate heading ids for you, based on the heading text.
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ Generated ids have **some limits**:
|
|||
- The id might not look good
|
||||
- You might want to **change or translate** the text without updating the existing id
|
||||
|
||||
### Explicit ids
|
||||
### Explicit ids {#explicit-ids}
|
||||
|
||||
A special Markdown syntax lets you set an **explicit heading id**:
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ Each markdown document displays a tab of content on the top-right corner.
|
|||
|
||||
But it is also possible to display an inline table of contents directly inside a markdown document, thanks to MDX.
|
||||
|
||||
## Full table of contents
|
||||
## Full table of contents {#full-table-of-contents}
|
||||
|
||||
The `toc` variable is available in any MDX document, and contain all the top level headings of a MDX document.
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
</BrowserWindow>
|
||||
```
|
||||
|
||||
## Custom table of contents
|
||||
## Custom table of contents {#custom-table-of-contents}
|
||||
|
||||
The `toc` props is just a list of table of contents items:
|
||||
|
||||
|
|
@ -72,50 +72,50 @@ The underlying content is just an example to have more table-of-contents items a
|
|||
|
||||
:::
|
||||
|
||||
## Example Section 1
|
||||
## Example Section 1 {#example-section-1}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 1 a
|
||||
### Example Subsection 1 a {#example-subsection-1-a}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 1 b
|
||||
### Example Subsection 1 b {#example-subsection-1-b}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 1 c
|
||||
### Example Subsection 1 c {#example-subsection-1-c}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
## Example Section 2
|
||||
## Example Section 2 {#example-section-2}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 2 a
|
||||
### Example Subsection 2 a {#example-subsection-2-a}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 2 b
|
||||
### Example Subsection 2 b {#example-subsection-2-b}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 2 c
|
||||
### Example Subsection 2 c {#example-subsection-2-c}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
## Example Section 3
|
||||
## Example Section 3 {#example-section-3}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 3 a
|
||||
### Example Subsection 3 a {#example-subsection-3-a}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 3 b
|
||||
### Example Subsection 3 b {#example-subsection-3-b}
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 3 c
|
||||
### Example Subsection 3 c {#example-subsection-3-c}
|
||||
|
||||
Lorem ipsum
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ You can expand the MDX functionalities, using plugins.
|
|||
|
||||
Docusaurus content plugins support both [Remark](https://github.com/remarkjs/remark) and [Rehype](https://github.com/rehypejs/rehype) plugins that work with MDX.
|
||||
|
||||
## Configuring plugins
|
||||
## Configuring plugins {#configuring-plugins}
|
||||
|
||||
An MDX plugin is usually a npm package, so you install them like other npm packages using npm.
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ module.exports = {
|
|||
};
|
||||
```
|
||||
|
||||
## Configuring plugin options
|
||||
## Configuring plugin options {#configuring-plugin-options}
|
||||
|
||||
Some plugins can be configured and accept their own options. In that case, use the `[plugin, pluginOptions]` syntax, like so:
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ By default, tabs are rendered eagerly, but it is possible to load them lazily by
|
|||
|
||||
:::
|
||||
|
||||
## Syncing tab choices
|
||||
## Syncing tab choices {#syncing-tab-choices}
|
||||
|
||||
You may want choices of the same kind of tabs to sync with each other. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to changing all OS-specific instructions tabs in one click. To achieve that, you can give all related tabs the same `groupId` prop. Note that doing this will persist the choice in `localStorage` and all `<Tab>` instances with the same `groupId` will update automatically when the value of one of them is changed. Note that `groupID` are globally-namespaced.
|
||||
|
||||
|
|
@ -190,7 +190,7 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
</Tabs>
|
||||
```
|
||||
|
||||
## Customizing tabs
|
||||
## Customizing tabs {#customizing-tabs}
|
||||
|
||||
You might want to customize the appearance of certain set of tabs. To do that you can pass the string in `className` prop and the specified CSS class will be added to the `Tabs` component:
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue