Skip to main content
通用文档站点 pages are written in MDX — a format that combines standard Markdown syntax with JSX components. This means you can write familiar Markdown for prose and structure, and drop in powerful interactive components wherever you need them, all in the same file.

​
Page frontmatter

Every page starts with a YAML frontmatter block at the top of the file, enclosed in triple dashes. At minimum, include a title so the page appears correctly in the browser tab and sidebar. Adding a description improves SEO and provides users with a quick summary before they start reading. 
---
title: "Your page title"
description: "A brief description for SEO."
---

​
Markdown basics

通用文档站点 supports standard Markdown for all common formatting needs. The following elements cover the majority of what you will use when writing documentation:
ElementSyntaxResult
Heading 1# HeadingLarge section title
Heading 2## HeadingSubsection title
Heading 3### HeadingMinor subsection
Bold**text**text
Italic*text*text
Link[text](url)Clickable link
Inline code`code`code
Code block```langSyntax-highlighted block

​
Callout components

Callouts let you draw your users’ attention to information that deserves special emphasis. 通用文档站点 provides four callout types, each with its own visual treatment:
Use <Note> for supplementary information that is helpful but not critical — context, background, or extra detail your users can safely skip.
Use <Warning> for actions that could cause problems, data loss, or other consequences if your users are not careful.
Use <Tip> to share best practices, shortcuts, or recommendations that help your users get the most out of a feature.
Use <Info> for factual context such as prerequisites, permissions, or version requirements that users should be aware of before proceeding.

​
Code blocks

Wrap code examples in triple backticks and always include a language tag immediately after the opening backticks. The language tag enables syntax highlighting, which makes code easier to read and scan. 
```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```
通用文档站点 supports highlighting for dozens of languages including typescript, python, bash, json, yaml, and many more. You can also add an optional filename after the language tag — for example, ```typescript app.ts — to display the filename above the code block.

​
Steps

Use the <Steps> component when you need to guide users through a sequence of actions where order matters. Wrap each individual action in a <Step> with a descriptive title. 
<Steps>
  <Step title="Install the package">
    Run `npm install my-package` in your project directory.
  </Step>
  <Step title="Add your configuration">
    Create a `config.json` file at the root of your project with your settings.
  </Step>
  <Step title="Start the server">
    Run `npm start` to launch your application.
  </Step>
</Steps>
Once you have written your pages, head to Organizing docs with navigation and groups to learn how to structure them into a navigable sidebar for your users.