Skip to main content

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.

Avoid using bare URLs in your documentation. Instead, use referenced hyperlinks, as shown in the following table.

TypeCodeDisplays as
Bare URLUpload the video to Pixelcloud at https://www.internalfb.com/intern/px/searchUpload the video to Pixelcloud at https://www.internalfb.com/intern/px/search
ReferencedUpload the video to [Pixelcloud](https://www.internalfb.com/intern/px/search)Upload the video to Pixelcloud
tip

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:

Information about using Kotlin with Flipper.
tip

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: