Markdown Formatting
This page provides recommendations on the use of a variety of Markdown features that help you create properly formatted documentation.
For tips and guidelines on when to use the same tools, and several others, see the Writing Guide.
Structural formatβ
Headersβ
- Start each main section with a level 2 header.
- Sub-sections should follow a hierarchical structure and should use header levels 3 to 5.
Markdown Example:
The following example Markdown shows how to use headers.
## Level 2 header
### Level 3 header
#### Level 4 header
##### Level 5 header
Markdown toolsβ
Backticksβ
Use Markdown backticks ( ` ), to provide emphasis for items such as file names, classes, methods, parameters, and expressions.
Let's use the `TestComponent`, which has one direct child, `InnerComponent`, and one non-direct child, `Text`.
Result:
Let's use the TestComponent
, which has one direct child, InnerComponent
, and one non-direct child, Text
.
Code Snippetsβ
For code snippets, remember to add the language tag (javascript
is used in the following example).
```javascript
import {addPlugin} from "react-native-flipper"
addPlugin({
getId() {
return 'ReactNativeExamplePlugin';
},
onConnect(connection) {
mammmals.forEach(({ title, pictureUrl }, index) => {
connection.send('newRow', {
id: index,
title,
url: pictureUrl
})
})
},
onDisconnect() {
}
})
Result:
import {addPlugin} from "react-native-flipper"
addPlugin({
getId() {
return 'ReactNativeExamplePlugin';
},
onConnect(connection) {
mammmals.forEach(({ title, pictureUrl }, index) => {
connection.send('newRow', {
id: index,
title,
url: pictureUrl
})
})
},
onDisconnect() {
}
})
For more code blocks features, such as line highlighting, see the Docusaurus Code blocks document.
Linksβ
Avoid using bare URLs in your documentation. Instead, use referenced hyperlinks, as shown in the following table.
Type | Code | Displays as |
---|---|---|
Bare URL | Upload the video to Pixelcloud at https://www.internalfb.com/intern/px/search | Upload the video to Pixelcloud at https://www.internalfb.com/intern/px/search |
Referenced | Upload the video to [Pixelcloud](https://www.internalfb.com/intern/px/search) | Upload the video to Pixelcloud |
Notice the use of square brackets around 'PixelCloud' in the referenced hyperlink.
Tabsβ
To organize content in tabs, Docusaurus provides the Tabs
React component:
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs
groupId="platform"
defaultValue="kotlin"
values={[
{label: 'Kotlin', value: 'kotlin'},
{label: 'Java', value: 'java'},
]}>
<TabItem value="kotlin">
Information about using Kotlin with Flipper.
</TabItem>
<TabItem value="java">
Information about using Java with Flipper.
</TabItem>
</Tabs>
Result:
- Kotlin
- Java
To sync several Tabs
components on the website set the same groupId
for them. More info in
Docusaurus Tabs Syncing docs.
Resourcesβ
For additional information, see the following resources: