From 1ebc62204a8bd184fd239beb507017d22e6aeaba Mon Sep 17 00:00:00 2001
From: 87xie <oscar87xie@gmail.com>
Date: Fri, 4 Oct 2024 03:15:20 +0800
Subject: [PATCH] update the documentation for the steps component (#3356)

* update the documentation for the steps component

* format with prettier
---
 .../advanced/customize-the-cascade-layers.mdx |  8 +++---
 docs/pages/docs/guide/built-ins/steps.mdx     | 27 +++++++------------
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/docs/pages/docs/guide/advanced/customize-the-cascade-layers.mdx b/docs/pages/docs/guide/advanced/customize-the-cascade-layers.mdx
index 22427086ce..97cad7b520 100644
--- a/docs/pages/docs/guide/advanced/customize-the-cascade-layers.mdx
+++ b/docs/pages/docs/guide/advanced/customize-the-cascade-layers.mdx
@@ -10,7 +10,7 @@ CSS into a specified cascade layer:
 
 <Steps>
 
-### Install `postcss-import`
+## Install `postcss-import`
 
 Install `postcss-import` and add it to `postcss.config.js`:
 
@@ -23,7 +23,7 @@ module.exports = {
 }
 ```
 
-### Disable Automatic Import of the Nextra Official Theme CSS
+## Disable Automatic Import of the Nextra Official Theme CSS
 
 Nextra by default automatically imports the official theme CSS. You can disable
 this behavior by setting `autoImportThemeStyle: false` in the Nextra
@@ -37,7 +37,7 @@ const withNextra = nextra({
 })
 ```
 
-### Set Up the Cascade Layers
+## Set Up the Cascade Layers
 
 In your CSS file (e.g. `styles.css`), import the `nextra-docs-theme` CSS and
 specify the layers:
@@ -52,7 +52,7 @@ specify the layers:
 }
 ```
 
-### Import Your CSS File
+## Import Your CSS File
 
 Create a `pages/_app.jsx` file and import your CSS files there:
 
diff --git a/docs/pages/docs/guide/built-ins/steps.mdx b/docs/pages/docs/guide/built-ins/steps.mdx
index 01bc2dad9a..b6194789e5 100644
--- a/docs/pages/docs/guide/built-ins/steps.mdx
+++ b/docs/pages/docs/guide/built-ins/steps.mdx
@@ -25,25 +25,18 @@ This is the third step description.
 
 ## Usage
 
-Wrap a set of markdown h3 headings with the `Steps` component to turn them into
-visual steps.
-
-<Steps>
-
-### Step 1
-
-Content for step 1.
-
-### Step 2
-
-Contents for step 2.
-
-</Steps>
+Wrap a set of markdown headings with the `<Steps>` component to turn them into
+visual steps. It supports `<h2>`, `<h3>`, and `<h4>` headings. You can choose
+the appropriate heading level based on the content hierarchy on the page.
 
 {/* prettier-ignore */}
-```mdx
+```mdx filename="MDX" {7-15}
 import { Steps } from 'nextra/components'
 
+## Getting Started
+
+Here is some description.
+
 <Steps>
 ### Step 1
 
@@ -55,14 +48,14 @@ Contents for step 2.
 </Steps>
 ```
 
-### Excluding Headings from Table of Contents
+## Excluding Headings from Table of Contents
 
 To exclude the headings from the `<Steps>` component (or any other headings) to
 appear in the Table of Contents, replace the Markdown headings `### ...` with
 `<h3>` HTML element wrapped in curly braces.
 
 {/* prettier-ignore */}
-```diff
+```diff filename="MDX"
 <Steps>
 - ### Step 1
 + {<h3>Step 1</h3>}