docsify-emmet-playground 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ZG
+
+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,84 @@
+# docsify-emmet-playground
+
+一个轻量的 Docsify 插件，用于在 Markdown 文档里嵌入 Emmet 实时演示器。读者可以输入 Emmet 缩写，页面会自动展开为 HTML，并在 iframe 中实时预览效果。
+
+## 特性
+
+- 支持 Emmet HTML/markup 缩写实时展开
+- 展示 Emmet 输入、展开后的 HTML、实时预览三块区域
+- 通过 Docsify `doneEach` 自动初始化，支持路由切换后重新渲染
+- iframe 使用 `sandbox`，预览内容和页面主体隔离
+- 支持响应式布局和暗色主题基础适配
+- 通过 CDN 动态加载 `emmet@2.4.11`
+
+## 安装
+
+### GitHub + jsDelivr
+
+把仓库上传到 GitHub 后，在 Docsify 的 `index.html` 中加入：
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/your-name/docsify-emmet-playground/dist/docsify-emmet-playground.css">
+<script src="https://cdn.jsdelivr.net/gh/your-name/docsify-emmet-playground/dist/docsify-emmet-playground.js"></script>
+```
+
+### npm + jsDelivr
+
+如果发布到 npm，可以这样引用：
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-emmet-playground/dist/docsify-emmet-playground.css">
+<script src="https://cdn.jsdelivr.net/npm/docsify-emmet-playground/dist/docsify-emmet-playground.js"></script>
+```
+
+## 使用
+
+在任意 Docsify Markdown 文件中插入：
+
+```html
+<div class="emmet-playground" data-emmet="ul>li.item$*3>a{第 $ 项}"></div>
+```
+
+也可以自定义标题：
+
+```html
+<div
+  class="emmet-playground"
+  data-title="列表语法演示"
+  data-emmet="ul>li.item$*3>a{第 $ 项}"
+></div>
+```
+
+## 示例
+
+可以尝试这些缩写：
+
+```text
+!
+ul>li*3
+.box>h2{标题}+p{内容}
+table>tr*2>td*3
+```
+
+## 本地预览
+
+```bash
+npm install -g docsify-cli
+npm run demo
+```
+
+然后打开：
+
+```text
+http://localhost:3000
+```
+
+## 注意事项
+
+- 插件需要浏览器能访问 Emmet CDN；离线或网络受限时会显示加载失败提示。
+- 当前版本只处理 HTML/markup 类型的 Emmet 展开，不处理 CSS 缩写展开。
+- 如果你的站点设置了严格 CSP，需要允许插件中使用的 CDN 域名和动态 `import()`。
+
+## License
+
+MIT

package/dist/docsify-emmet-playground.css

@@ -0,0 +1,163 @@
+.emmet-playground {
+  margin: 24px 0;
+  border: 1px solid rgba(86, 116, 168, 0.28);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--background, #ffffff);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+}
+
+.emmet-playground__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(86, 116, 168, 0.18);
+  background: rgba(86, 116, 168, 0.08);
+}
+
+.emmet-playground__title {
+  color: var(--heading-color, #1f2937);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.emmet-playground__status {
+  flex: 0 0 auto;
+  color: #2563eb;
+  font-size: 12px;
+}
+
+.emmet-playground__status.is-error {
+  color: #b91c1c;
+}
+
+.emmet-playground__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
+  gap: 0;
+}
+
+.emmet-playground__panel {
+  display: flex;
+  min-width: 0;
+  min-height: 260px;
+  flex-direction: column;
+  margin: 0;
+  border-right: 1px solid rgba(86, 116, 168, 0.16);
+}
+
+.emmet-playground__panel:last-child {
+  border-right: 0;
+}
+
+.emmet-playground__preview-panel {
+  grid-column: 1 / -1;
+  border-top: 1px solid rgba(86, 116, 168, 0.16);
+}
+
+.emmet-playground__label {
+  display: block;
+  padding: 10px 12px;
+  color: var(--text-color-base, #374151);
+  font-size: 13px;
+  font-weight: 600;
+  background: rgba(148, 163, 184, 0.1);
+}
+
+.emmet-playground__input,
+.emmet-playground__output {
+  width: 100%;
+  min-height: 220px;
+  flex: 1;
+  padding: 12px;
+  border: 0;
+  outline: 0;
+  resize: vertical;
+  color: var(--code-color, #111827);
+  background: var(--code-block-background, #f8fafc);
+  font: 14px/1.55 Consolas, Monaco, "Courier New", monospace;
+}
+
+.emmet-playground__output {
+  color: #0f766e;
+}
+
+.emmet-playground__preview {
+  width: 100%;
+  min-height: 240px;
+  flex: 1;
+  border: 0;
+  background: #ffffff;
+}
+
+body.dark .emmet-playground,
+[data-theme="dark"] .emmet-playground {
+  border-color: rgba(148, 163, 184, 0.28);
+  background: #111827;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
+}
+
+body.dark .emmet-playground__header,
+[data-theme="dark"] .emmet-playground__header {
+  background: rgba(148, 163, 184, 0.12);
+  border-bottom-color: rgba(148, 163, 184, 0.2);
+}
+
+body.dark .emmet-playground__title,
+[data-theme="dark"] .emmet-playground__title,
+body.dark .emmet-playground__label,
+[data-theme="dark"] .emmet-playground__label {
+  color: #e5e7eb;
+}
+
+body.dark .emmet-playground__input,
+body.dark .emmet-playground__output,
+[data-theme="dark"] .emmet-playground__input,
+[data-theme="dark"] .emmet-playground__output {
+  color: #d1d5db;
+  background: #0b1120;
+}
+
+body.dark .emmet-playground__output,
+[data-theme="dark"] .emmet-playground__output {
+  color: #5eead4;
+}
+
+@media screen and (min-width: 1180px) {
+  .emmet-playground__grid {
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr);
+  }
+
+  .emmet-playground__preview-panel {
+    grid-column: auto;
+    border-top: 0;
+  }
+}
+
+@media screen and (max-width: 760px) {
+  .emmet-playground__header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .emmet-playground__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .emmet-playground__panel {
+    min-height: 220px;
+    border-right: 0;
+    border-bottom: 1px solid rgba(86, 116, 168, 0.16);
+  }
+
+  .emmet-playground__panel:last-child {
+    border-bottom: 0;
+  }
+
+  .emmet-playground__input,
+  .emmet-playground__output {
+    min-height: 170px;
+  }
+}

package/dist/docsify-emmet-playground.js

@@ -0,0 +1,176 @@
+(function () {
+  var EMMET_CDNS = [
+    "https://cdn.jsdelivr.net/npm/emmet@2.4.11/+esm",
+    "https://esm.sh/emmet@2.4.11",
+    "https://cdnjs.cloudflare.com/ajax/libs/emmet/2.4.11/emmet.es.min.js",
+    "https://cdn.jsdelivr.net/npm/emmet@2.4.11/dist/emmet.es.js",
+  ];
+  var emmetModulePromise;
+
+  function loadEmmet() {
+    if (!emmetModulePromise) {
+      emmetModulePromise = EMMET_CDNS.reduce(function (promise, url) {
+        return promise.catch(function () {
+          return import(url);
+        });
+      }, Promise.reject()).then(function (mod) {
+        var expand =
+          mod.expandAbbreviation ||
+          (typeof mod.default === "function" && mod.default) ||
+          (mod.default && mod.default.expandAbbreviation);
+
+        if (!expand) {
+          throw new Error("Emmet expandAbbreviation API was not found.");
+        }
+
+        return expand;
+      });
+    }
+
+    return emmetModulePromise;
+  }
+
+  function escapeHtml(value) {
+    return value
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  function createPreviewDocument(html) {
+    if (/^\s*<!doctype|<html[\s>]/i.test(html)) {
+      return html;
+    }
+
+    return [
+      "<!doctype html>",
+      '<html lang="zh-Hans">',
+      "<head>",
+      '<meta charset="UTF-8">',
+      '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
+      "<style>",
+      "body{box-sizing:border-box;margin:0;padding:16px;font-family:Arial,'Microsoft YaHei',sans-serif;line-height:1.6;color:#1f2937;background:#fff;}",
+      "*{box-sizing:border-box;}",
+      "img,video{max-width:100%;height:auto;}",
+      "table{border-collapse:collapse;width:100%;}",
+      "td,th{border:1px solid #d1d5db;padding:6px 8px;}",
+      "a{color:#2563eb;}",
+      "</style>",
+      "</head>",
+      "<body>",
+      html,
+      "</body>",
+      "</html>",
+    ].join("");
+  }
+
+  function buildPlayground(container) {
+    if (container.dataset.emmetReady === "true") {
+      return;
+    }
+
+    container.dataset.emmetReady = "true";
+
+    var initialEmmet = container.getAttribute("data-emmet") || "ul>li.item$*3>a{第 $ 项}";
+    var title = container.getAttribute("data-title") || "Emmet 实时演示";
+
+    container.innerHTML = [
+      '<div class="emmet-playground__header">',
+      '<span class="emmet-playground__title">' + escapeHtml(title) + "</span>",
+      '<span class="emmet-playground__status" aria-live="polite">加载 Emmet...</span>',
+      "</div>",
+      '<div class="emmet-playground__grid">',
+      '<label class="emmet-playground__panel">',
+      '<span class="emmet-playground__label">Emmet 缩写</span>',
+      '<textarea class="emmet-playground__input" spellcheck="false"></textarea>',
+      "</label>",
+      '<label class="emmet-playground__panel">',
+      '<span class="emmet-playground__label">展开后的 HTML</span>',
+      '<textarea class="emmet-playground__output" spellcheck="false" readonly></textarea>',
+      "</label>",
+      '<section class="emmet-playground__panel emmet-playground__preview-panel" aria-label="实时预览">',
+      '<span class="emmet-playground__label">实时预览</span>',
+      '<iframe class="emmet-playground__preview" sandbox="" title="Emmet 预览"></iframe>',
+      "</section>",
+      "</div>",
+    ].join("");
+
+    var input = container.querySelector(".emmet-playground__input");
+    var output = container.querySelector(".emmet-playground__output");
+    var preview = container.querySelector(".emmet-playground__preview");
+    var status = container.querySelector(".emmet-playground__status");
+    var expandAbbreviation;
+    var debounceTimer;
+
+    input.value = initialEmmet;
+
+    function setError(message) {
+      output.value = "";
+      preview.srcdoc = createPreviewDocument(
+        '<p style="color:#b91c1c;margin:0;">' + escapeHtml(message) + "</p>"
+      );
+      status.textContent = "展开失败";
+      status.classList.add("is-error");
+    }
+
+    function render() {
+      if (!expandAbbreviation) {
+        return;
+      }
+
+      var abbreviation = input.value.trim();
+
+      if (!abbreviation) {
+        output.value = "";
+        preview.srcdoc = createPreviewDocument("");
+        status.textContent = "等待输入";
+        status.classList.remove("is-error");
+        return;
+      }
+
+      try {
+        var html = expandAbbreviation(abbreviation, {
+          syntax: "html",
+          type: "markup",
+          options: {
+            "output.indent": "  ",
+            "output.selfClosingStyle": "html",
+          },
+        });
+
+        output.value = html;
+        preview.srcdoc = createPreviewDocument(html);
+        status.textContent = "已实时预览";
+        status.classList.remove("is-error");
+      } catch (error) {
+        setError(error && error.message ? error.message : "当前缩写无法展开。");
+      }
+    }
+
+    input.addEventListener("input", function () {
+      window.clearTimeout(debounceTimer);
+      debounceTimer = window.setTimeout(render, 120);
+    });
+
+    loadEmmet()
+      .then(function (expand) {
+        expandAbbreviation = expand;
+        render();
+      })
+      .catch(function () {
+        setError("Emmet CDN 加载失败，请检查网络连接后刷新页面。");
+      });
+  }
+
+  function initPlaygrounds() {
+    document.querySelectorAll(".emmet-playground").forEach(buildPlayground);
+  }
+
+  function docsifyPlugin(hook) {
+    hook.doneEach(initPlaygrounds);
+  }
+
+  window.$docsify = window.$docsify || {};
+  window.$docsify.plugins = [].concat(window.$docsify.plugins || [], docsifyPlugin);
+})();

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "docsify-emmet-playground",
+  "version": "0.1.0",
+  "description": "A lightweight Docsify plugin for live Emmet abbreviation expansion and HTML preview.",
+  "keywords": [
+    "docsify",
+    "docsify-plugin",
+    "emmet",
+    "html",
+    "playground"
+  ],
+  "homepage": "https://github.com/your-name/docsify-emmet-playground#readme",
+  "bugs": {
+    "url": "https://github.com/your-name/docsify-emmet-playground/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-name/docsify-emmet-playground.git"
+  },
+  "license": "MIT",
+  "author": "ZG",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/docsify-emmet-playground.js",
+  "style": "dist/docsify-emmet-playground.css",
+  "scripts": {
+    "demo": "docsify serve demo",
+    "check": "node --check dist/docsify-emmet-playground.js"
+  }
+}