vitepress-plugin-steps 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,81 @@
+# vitepress-plugin-steps
+
+Render ordered/unordered lists as numbered steps with badges and connecting lines.
+
+将有序/无序列表渲染为带序号和连接线的步骤样式。
+
+## Usage
+
+### With Vitepress-tuck
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-tuck vitepress-plugin-steps
+# pnpm
+pnpm add -D vitepress-tuck vitepress-plugin-steps
+# yarn
+yarn add -D vitepress-tuck vitepress-plugin-steps
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import steps from 'vitepress-plugin-steps'
+import { defineConfig } from 'vitepress-tuck'
+
+export default defineConfig({
+  plugins: [steps()],
+})
+```
+
+### With Vitepress
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-plugin-steps
+# pnpm
+pnpm add -D vitepress-plugin-steps
+# yarn
+yarn add -D vitepress-plugin-steps
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { stepsMarkdownPlugin } from 'vitepress-plugin-steps'
+
+export default defineConfig({
+  markdown: {
+    config: (md) => {
+      md.use(stepsMarkdownPlugin)
+    },
+  },
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import 'vitepress-plugin-steps/style.css'
+```
+
+## Syntax
+
+Use `::: steps` container to create step-by-step instructions.
+
+```md
+::: steps
+1. First, clone the repository
+2. Then, install dependencies
+3. Finally, start the dev server
+:::
+```
+
+Each list item is rendered with a numbered circle badge and vertical connecting lines between steps.
+Supports all standard Markdown syntax (headings, paragraphs, code blocks, etc.) inside each step.

package/dist/client/style.css

@@ -0,0 +1,62 @@
+.vp-doc .vp-steps {
+  margin-block: 16px;
+}
+
+.vp-doc .vp-steps > :where(ol,ul) {
+  padding-inline-start: 0;
+  list-style: none;
+}
+
+.vp-doc .vp-steps > :where(ol,ul) > li {
+  position: relative;
+  min-height: 28px;
+  padding-inline-start: 44px;
+  margin-block-end: 16px;
+  line-height: 28px;
+}
+
+.vp-doc .vp-steps > :where(ol,ul) > li::before {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 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: 0.3s ease;
+  transition-property: color, background-color, border-color;
+}
+
+.vp-doc .vp-steps > :where(ol,ul) > li:not(:last-of-type)::after {
+  position: absolute;
+  inset-block: 34px -10px;
+  inset-inline-start: 14px;
+  width: 1px;
+  content: "";
+  background-color: var(--vp-c-divider);
+  transition: background-color 0.3s ease;
+}
+
+.vp-doc .vp-steps > :where(ol,ul) > li > :first-child {
+  margin-block-start: 0;
+}
+
+.vp-doc .vp-steps > :where(ol,ul) > li > :first-child:where(h1,h2,h3,h4,h5,h6) {
+  padding-block-start: 0;
+  border-block-start: none;
+}
+
+.vp-doc .vp-steps > :where(ol,ul) > li > :first-child:where(p) {
+  line-height: 28px;
+}
+
+.vp-doc .vp-steps > :where(ol,ul) > li + li {
+  margin-block-start: 1px;
+}

package/dist/node/index.d.ts

@@ -0,0 +1,9 @@
+import { PluginSimple } from "markdown-it";
+
+//#region src/node/stepsPlugin.d.ts
+declare const stepsMarkdownPlugin: PluginSimple;
+//#endregion
+//#region src/node/index.d.ts
+declare const _default: (option?: unknown) => import("vitepress-tuck").VitepressPlugin;
+//#endregion
+export { _default as default, stepsMarkdownPlugin };

package/dist/node/index.js

@@ -0,0 +1,17 @@
+import { definePlugin } from "vitepress-tuck";
+import { createContainerPlugin } from "vitepress-plugin-toolkit";
+//#region src/node/stepsPlugin.ts
+const stepsMarkdownPlugin = (md) => {
+	createContainerPlugin(md, "steps", { before: () => "<div class=\"vp-steps\">" });
+};
+//#endregion
+//#region src/node/index.ts
+var node_default = definePlugin(() => ({
+	name: "vitepress-plugin-steps",
+	client: { imports: [`import 'vitepress-plugin-steps/style.css'`] },
+	markdown: { config: (md) => {
+		md.use(stepsMarkdownPlugin);
+	} }
+}));
+//#endregion
+export { node_default as default, stepsMarkdownPlugin };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "vitepress-plugin-steps",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Render ordered/unordered lists as numbered steps with badges and connecting lines.",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
+  "license": "MIT",
+  "keywords": [
+    "vitepress",
+    "vitepress-plugin",
+    "steps"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/node/index.d.ts",
+      "default": "./dist/node/index.js"
+    },
+    "./style.css": "./dist/client/style.css"
+  },
+  "module": "./dist/node/index.js",
+  "types": "./dist/node/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1.6.4 || ^2.0.0-alpha.17",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "vitepress-tuck": "0.1.0",
+    "vitepress-plugin-toolkit": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf --glob ./dist",
+    "dev": "pnpm '/(tsdown|copy):watch/'",
+    "build": "pnpm tsdown && pnpm copy",
+    "copy": "cpx \"src/**/*.css\" dist",
+    "copy:watch": "pnpm copy -w",
+    "tsdown": "tsdown --config-loader unrun",
+    "tsdown:watch": "pnpm tsdown -w"
+  }
+}