update the documentation for the steps component

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:
 

docs/pages/docs/guide/built-ins/steps.mdx

@@ -25,25 +25,16 @@ 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 +46,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>}