[v3] support for h2 and h4 headings with steps component (#3237)

* [v3] support h2 headings with steps component

* support for h2 and h4 headings with steps component

* polish

---------

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

.changeset/good-masks-jam.md

@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+Support for `h2` and `h4` Markdown headings with the Steps component.

examples/blog/pages/posts/callout.mdx

@@ -45,6 +45,32 @@ Contents for step 2.
 
 </Steps>
 
+<Steps>
+  ## Test
+  Run pnpm test
+
+  <Steps>
+    ### nextra:test
+
+    ### nextra-theme-docs:test
+
+    <Steps>
+      #### more
+
+      #### more more
+
+      #### more more more
+
+    </Steps>
+
+    ### nextra-theme-blog:test
+
+  </Steps>
+
+## Lint
+
+</Steps>
+
 ## Tabs
 
 {/* prettier-ignore */}

examples/swr-site/pages/en/docs/getting-started.mdx

@@ -31,17 +31,46 @@ https://google.com/da;djaldhksagfugsufgasuyfgyuasgfuasgdjasbdjasdjkasfuydfasyrdy
 </details>
 
 <Steps>
-### One
+  ## Step 1
   <Steps>
-    ### Two
-    ### Three
+    ### Step 1.1
+
+    ### Step 1.2
+
+  </Steps>
+  ## Step 2
+
+  <Steps>
+    ### Step 2.1
+
+    ### Step 2.2
+
   </Steps>
-### Four
+</Steps>
+
+## Development
+
+<Steps>
+### Install Dependencies
+
+Run `pnpm install` in the project root directory.
+
+### Lint
+
   <Steps>
-    ### Five
-    ### Six
+    #### Lint ESLint
+
+    run `pnpm lint`
+
+    #### Lint Prettier
+
+    run `pnpm lint:prettier --write` to format the entire project.
+
   </Steps>
-### Seven
+
+### Test
+
+Run `pnpm test`
 
 </Steps>
 

packages/nextra/styles/steps.css

@@ -1,11 +1,17 @@
-.nextra-steps h3 {
-  counter-increment: var(--counter-id);
+.nextra-steps {
+  h2,
+  h3,
+  h4 {
+    counter-increment: var(--counter-id);
+    /* resets from nextra-theme-docs */
+    @apply _border-0 _pb-0 _font-semibold _tracking-tight _mt-8 _text-2xl;
 
-  &:before {
-    @apply _absolute _size-[33px];
-    @apply _border-4 _border-[rgb(var(--nextra-bg))] _bg-gray-100 dark:_bg-neutral-800;
-    @apply _rounded-full _text-neutral-400 _text-base _font-normal _text-center _-indent-px;
-    @apply _mt-[3px] _ml-[-41px];
-    content: counter(var(--counter-id));
+    &:before {
+      @apply _absolute _size-[33px];
+      @apply _border-4 _border-[rgb(var(--nextra-bg))] _bg-gray-100 dark:_bg-neutral-800;
+      @apply _rounded-full _text-neutral-400 _text-base _font-normal _text-center _-indent-px;
+      @apply _mt-[3px] _ml-[-41px];
+      content: counter(var(--counter-id));
+    }
   }
 }