diff --git a/theme/src/client/styles/custom-block.css b/theme/src/client/styles/custom-block.css
new file mode 100644
index 00000000..111247fc
--- /dev/null
+++ b/theme/src/client/styles/custom-block.css
@@ -0,0 +1,208 @@
+/* --------------------- demo-wrapper ------------------------  */
+.vp-doc .demo-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 40px;
+  margin: 40px -16px;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-2);
+  transition: var(--t-color);
+  transition-property: border, box-shadow;
+}
+
+.vp-doc .demo-wrapper .demo-head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 0;
+  border-bottom: solid 1px var(--vp-c-divider);
+  transition: border-bottom var(--t-color);
+}
+
+.vp-doc .demo-wrapper .demo-container {
+  min-height: 0;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 22px;
+  background-color: var(--vp-c-bg-alt);
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  transition: background-color var(--t-color);
+}
+
+.vp-doc .demo-wrapper.has-title .demo-head {
+  border-bottom-color: transparent;
+}
+
+.vp-doc .demo-wrapper.only-img {
+  overflow: hidden;
+}
+
+.vp-doc .demo-wrapper.only-img img {
+  display: block;
+}
+
+.vp-doc .demo-wrapper.only-img .demo-container,
+.vp-doc .demo-wrapper.no-padding .demo-container {
+  padding: 0;
+}
+
+.vp-doc .demo-wrapper.has-height .demo-container {
+  height: var(--demo-container-height);
+  overflow-y: auto;
+}
+
+.vp-doc .demo-wrapper .demo-ctrl {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px 0 5px 8px;
+}
+
+.vp-doc .demo-wrapper .demo-ctrl i {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background-color: #ccc;
+  border-radius: 100%;
+  transition: background-color var(--t-color);
+}
+
+.vp-doc .demo-wrapper .demo-ctrl i:nth-child(1) {
+  background-color: var(--vp-c-danger-3);
+}
+
+.vp-doc .demo-wrapper .demo-ctrl i:nth-child(2) {
+  background-color: var(--vp-c-warning-3);
+}
+
+.vp-doc .demo-wrapper .demo-ctrl i:nth-child(3) {
+  background-color: var(--vp-c-green-3);
+}
+
+.vp-doc .demo-wrapper .demo-title {
+  position: relative;
+  min-width: 0;
+  padding: 0 16px;
+  margin: 0 20px -1px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-alt);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  transition: var(--t-color);
+  transition-property: color, background-color;
+}
+
+.vp-doc .demo-wrapper .demo-title p {
+  max-width: 100%;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+.vp-doc .demo-wrapper .demo-title::after,
+.vp-doc .demo-wrapper .demo-title::before {
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  width: 8px;
+  height: 8px;
+  content: " ";
+  transition: background var(--t-color);
+}
+
+.vp-doc .demo-wrapper .demo-title::before {
+  left: 100%;
+  background: radial-gradient(16px at right top, transparent 50%, var(--vp-c-bg-alt) 50%);
+}
+
+.vp-doc .demo-wrapper .demo-title::after {
+  right: 100%;
+  background: radial-gradient(16px at left top, transparent 50%, var(--vp-c-bg-alt) 50%);
+}
+
+.vp-doc .demo-wrapper .demo-container > *:first-child {
+  margin-top: 0;
+}
+
+.vp-doc .demo-wrapper .demo-container > *:last-child {
+  margin-bottom: 0;
+}
+
+@media (min-width: 419px) {
+  .vp-doc .demo-wrapper {
+    margin: 40px 0;
+  }
+}
+
+/* ---------------------------- Steps --------------------------- */
+.vp-doc .vp-steps {
+  margin: 16px 0;
+}
+
+.vp-doc .vp-steps > ol,
+.vp-doc .vp-steps > ul {
+  padding-inline-start: 0;
+  list-style: none;
+}
+
+.vp-doc .vp-steps > ol > li,
+.vp-doc .vp-steps > ul > li {
+  position: relative;
+  min-height: 22px;
+  padding-bottom: 1px;
+  padding-left: 44px;
+}
+
+.vp-doc .vp-steps > ol > li::before,
+.vp-doc .vp-steps > ul > li::before {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 28px;
+  color: var(--vp-c-text-1);
+  text-align: center;
+  content: counter(list-item);
+  background-color: var(--vp-c-bg-soft);
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 100%;
+  transition: var(--t-color);
+  transition-property: color, background-color, border-color;
+}
+
+.vp-doc .vp-steps > ol > li:not(:last-of-type)::after,
+.vp-doc .vp-steps > ul > li:not(:last-of-type)::after {
+  position: absolute;
+  inset-inline-start: 14px;
+  top: 34px;
+  bottom: 6px;
+  width: 1px;
+  content: "";
+  background-color: var(--vp-c-divider);
+  transition: background-color var(--t-color);
+}
+
+.vp-doc .vp-steps > ol > li > :first-child,
+.vp-doc .vp-steps > ul > li > :first-child {
+  margin-top: 0;
+}
+
+.vp-doc .vp-steps > ol > li > :first-child:where(h1,h2,h3,h4,h5,h6),
+.vp-doc .vp-steps > ul > li > :first-child:where(h1,h2,h3,h4,h5,h6) {
+  padding-top: 0;
+  border-top: none;
+}
+
+.vp-doc .vp-steps > ol > li + li,
+.vp-doc .vp-steps > ul > li + li {
+  margin-top: 0;
+}
diff --git a/theme/src/client/styles/index.css b/theme/src/client/styles/index.css
index a0803720..c5a6c315 100644
--- a/theme/src/client/styles/index.css
+++ b/theme/src/client/styles/index.css
@@ -8,6 +8,7 @@
 @import url("./utils.css");
 @import url("./content.css");
 @import url("./code.css");
+@import url("./custom-block.css");
 
 @import url("./twoslash.css");
 @import url("./md-enhance.css");
diff --git a/theme/src/client/styles/md-enhance.css b/theme/src/client/styles/md-enhance.css
index 390bd33b..8a447120 100644
--- a/theme/src/client/styles/md-enhance.css
+++ b/theme/src/client/styles/md-enhance.css
@@ -587,148 +587,6 @@
   font-size: 0.8rem;
 }
 
-/* --------------------- demo-wrapper ------------------------  */
-.vp-doc .demo-wrapper {
-  display: flex;
-  flex-direction: column;
-  min-height: 40px;
-  margin: 40px -16px;
-  border: solid 1px var(--vp-c-divider);
-  border-radius: 8px;
-  box-shadow: var(--vp-shadow-2);
-  transition: var(--t-color);
-  transition-property: border, box-shadow;
-}
-
-.vp-doc .demo-wrapper.has-title .demo-head {
-  border-bottom-color: transparent;
-}
-
-.vp-doc .demo-wrapper.only-img {
-  overflow: hidden;
-}
-
-.vp-doc .demo-wrapper.only-img img {
-  display: block;
-}
-
-.vp-doc .demo-wrapper.only-img .demo-container,
-.vp-doc .demo-wrapper.no-padding .demo-container {
-  padding: 0;
-}
-
-.vp-doc .demo-wrapper.has-height .demo-container {
-  height: var(--demo-container-height);
-  overflow-y: auto;
-}
-
-.vp-doc .demo-wrapper .demo-head {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  min-height: 0;
-  border-bottom: solid 1px var(--vp-c-divider);
-  transition: border-bottom var(--t-color);
-}
-
-.vp-doc .demo-wrapper .demo-ctrl {
-  display: flex;
-  gap: 5px;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 5px 0 5px 8px;
-}
-
-.vp-doc .demo-wrapper .demo-ctrl i {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  background-color: #ccc;
-  border-radius: 100%;
-  transition: background-color var(--t-color);
-}
-
-.vp-doc .demo-wrapper .demo-ctrl i:nth-child(1) {
-  background-color: var(--vp-c-danger-3);
-}
-
-.vp-doc .demo-wrapper .demo-ctrl i:nth-child(2) {
-  background-color: var(--vp-c-warning-3);
-}
-
-.vp-doc .demo-wrapper .demo-ctrl i:nth-child(3) {
-  background-color: var(--vp-c-green-3);
-}
-
-.vp-doc .demo-wrapper .demo-title {
-  position: relative;
-  min-width: 0;
-  padding: 0 16px;
-  margin: 0 20px -1px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  background-color: var(--vp-c-bg-alt);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  transition: var(--t-color);
-  transition-property: color, background-color;
-}
-
-.vp-doc .demo-wrapper .demo-title p {
-  max-width: 100%;
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-wrap: nowrap;
-}
-
-.vp-doc .demo-wrapper .demo-title::after,
-.vp-doc .demo-wrapper .demo-title::before {
-  position: absolute;
-  bottom: 0;
-  z-index: 1;
-  width: 8px;
-  height: 8px;
-  content: " ";
-  transition: background var(--t-color);
-}
-
-.vp-doc .demo-wrapper .demo-title::before {
-  left: 100%;
-  background: radial-gradient(16px at right top, transparent 50%, var(--vp-c-bg-alt) 50%);
-}
-
-.vp-doc .demo-wrapper .demo-title::after {
-  right: 100%;
-  background: radial-gradient(16px at left top, transparent 50%, var(--vp-c-bg-alt) 50%);
-}
-
-.vp-doc .demo-wrapper .demo-container {
-  min-height: 0;
-  padding: 20px;
-  font-size: 14px;
-  line-height: 22px;
-  background-color: var(--vp-c-bg-alt);
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
-  transition: background-color var(--t-color);
-}
-
-.vp-doc .demo-wrapper .demo-container > *:first-child {
-  margin-top: 0;
-}
-
-.vp-doc .demo-wrapper .demo-container > *:last-child {
-  margin-bottom: 0;
-}
-
-@media (min-width: 419px) {
-  .vp-doc .demo-wrapper {
-    margin: 40px 0;
-  }
-}
-
 /* --------------------- Markdown Enhance: Mermaid ------------------------  */
 .mermaid-actions {
   padding-right: 20px;
diff --git a/theme/src/node/plugins/containerPlugins.ts b/theme/src/node/plugins/containerPlugins.ts
index 49743fb0..502ce428 100644
--- a/theme/src/node/plugins/containerPlugins.ts
+++ b/theme/src/node/plugins/containerPlugins.ts
@@ -39,6 +39,15 @@ export const customContainerPlugins: Plugin[] = [
       return '</div></div>\n'
     },
   }),
+  containerPlugin({
+    type: 'steps',
+    before() {
+      return '<div class="vp-steps">'
+    },
+    after() {
+      return '</div>'
+    },
+  }),
 ]
 
 /**