Markdown

Dev Portal supports GitHub Flavored Markdown (GFM) with additional features for creating rich documentation.

Basic Formatting

Headers

Use # to create headers. The number of # symbols determines the header level:

Code(md)
 
# H1 Header

## H2 Header

### H3 Header

#### H4 Header

##### H5 Header

###### H6 Header

Text Formatting

Code(mdx)
 
**Bold text**
_Italic text_
~~Strikethrough text~~
`Inline code`

Bold text
Italic text
Strikethrough text
Inline code

Lists

Unordered lists:

Code(md)
 
- Item 1
- Item 2
  - Nested item
  - Another nested item

Ordered lists:

Code(md)
 
1. First item
2. Second item
   1. Nested item
   2. Another nested item

Links and Images

Code(md)
 
[Link text](https://example.com)

![Image alt text](image.jpg)

Tables

Code(md)
 
| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Blockquotes

Code(md)
 
> This is a blockquote
>
> It can span multiple lines

Frontmatter

Frontmatter allows you to configure page metadata using YAML at the beginning of your markdown files:

Code(md)
 
---
title: My Page Title
description: Page description for SEO
navigation_icon: book
category: Getting Started
---

Your markdown content starts here...

Common frontmatter properties include title, description, sidebar_icon, and category. For a complete list of supported properties, see the Frontmatter documentation.

MDX Support

Dev Portal supports MDX, allowing you to use JSX components within your markdown:

my-page.mdx(mdx)
 
import MyCustomComponent from "./MyCustomComponent";

# Regular Markdown

This is regular markdown content.

<MyCustomComponent prop="value" />

You can mix markdown and JSX seamlessly.

MDX enables you to create interactive documentation with custom React components. Learn more in the MDX documentation.

Syntax Highlighting

Dev Portal uses Shiki for syntax highlighting in code blocks:

Code(md)
 
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

Advanced features:

• Line highlighting: {1,3-5}
• Word highlighting: /keyword/
• Line numbers: showLineNumbers
• Titles: title="filename.js"

Code
 
```tsx {4-5} /useState/ title="Counter.tsx" showLineNumbers
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

Counter.tsx(tsx)
 
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

For complete syntax highlighting documentation, see Code Blocks.

Additional Features

Dev Portal also supports:

• Admonitions - Callout boxes for notes, warnings, and tips
• Task lists with checkboxes
• Emoji support :tada:
• Automatic link detection

Task Lists

Code(md)
 
- [x] Completed task
- [ ] Incomplete task
- [ ] Another task

Collapsible Sections

You can create collapsible content using HTML <details> and <summary> tags:

Code(html)
 
<details>
  <summary>Click to expand</summary>

  This content is hidden by default and can be expanded by clicking the summary. You can include any markdown content here: - Lists - **Bold text** - Code blocks - Images
</details>