docsify-emmet-playground

一个轻量的 Docsify 插件，用于在 Markdown 文档里嵌入 Emmet 实时演示器。读者可以输入 Emmet 缩写，页面会自动展开为 HTML，并在 iframe 中实时预览效果。

特性

• 支持 Emmet HTML/markup 缩写实时展开
• 展示 Emmet 输入、展开后的 HTML、实时预览三块区域
• 通过 Docsify doneEach 自动初始化，支持路由切换后重新渲染
• iframe 使用 sandbox，预览内容和页面主体隔离
• 支持响应式布局和暗色主题基础适配
• 通过 CDN 动态加载 [email protected]

安装

GitHub + jsDelivr

把仓库上传到 GitHub 后，在 Docsify 的 index.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，还可以在 Docsify 的 index.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 文件中插入：

<div class="emmet-playground" data-emmet="ul>li.item$*3>a{第 $ 项}"></div>

也可以自定义标题：

<div
  class="emmet-playground"
  data-title="列表语法演示"
  data-emmet="ul>li.item$*3>a{第 $ 项}"
></div>

示例

可以尝试这些缩写：

!
ul>li*3
.box>h2{标题}+p{内容}
table>tr*2>td*3

本地预览

npm install -g docsify-cli
npm run demo

然后打开：

http://localhost:3000

注意事项

• 插件需要浏览器能访问 Emmet CDN；离线或网络受限时会显示加载失败提示。
• 当前版本只处理 HTML/markup 类型的 Emmet 展开，不处理 CSS 缩写展开。
• 如果你的站点设置了严格 CSP，需要允许插件中使用的 CDN 域名和动态 import()。

License

MIT