应用截图
详细介绍
直接在 github.com 上查看 Markdown JavaScript 演示。
# Markdown JavaScript Viewer（mdjs-viewer）
[mdjs（Markdown JavaScript）](https://www.npmjs.com/package/@mdjs/core) 支持在 Markdown 文档中执行代码并显示交互式演示。
此扩展程序将这一功能直接带到 github.com。
您可以在以下位置查看实时演示：
- GitHub Markdown 文件（例如 README.md）
- GitHub 议题（包括编辑预览、新评论预览和新议题预览）
- ……计划支持更多位置，但尚未实现
## 安全性
执行用户代码，尤其是在 GitHub 议题中执行，可能很危险。
此扩展程序尽可能隔离代码执行。
其安全性可视为与 CodePen 或 JSFiddle 等执行用户代码的页面相当。
安全措施包括：
- 未经用户操作不执行任何代码（例如，必须先点击按钮）
- 在 iframe 中显示演示和执行代码
- 使用 [sandbox](https://www.w3schools.com/tags/att_iframe_sandbox.asp)，设置为 `sandbox="allow-scripts"`
- 使用 data URI 填充 iframe
- 不允许向 iframe 外部发出任何请求（unpkg 除外）
这可以防止[所有已知的攻击方式](https://github.com/open-wc/mdjs-viewer/issues/2)。如果您发现新的攻击方式，请[报告](https://github.com/open-wc/mdjs-viewer/issues/new)。
### 警告
为了正常运行，此扩展程序会按以下规则修改 github.com 的 CSP（内容安全策略）：
- 向 script-src 添加
- `'unsafe-inline'`，以便在 mdjs iframe 中执行代码块
- `unpkg.com`，以便在 mdjs iframe 中加载用户依赖项
## 演示
启用扩展程序并访问以下页面：
1. [demo-wc-card 的 Readme](https://github.com/daKmoR/demo-wc-card)
2. [demo-wc-card 的议题](https://github.com/daKmoR/demo-wc-card/issues/1)
## 工作原理
它会在 Markdown 页面和议题中添加一个 `show demo ▹` 按钮。点击后，扩展程序会获取原始 Markdown 文本，然后通过 [mdjs](https://www.npmjs.com/package/@mdjs/core) 和一个额外的插件进行处理。该插件会将所有导入（相对导入和裸导入）替换为带有 `?module` 标记的 [unpkg.com](https://unpkg.com/) URL。这样，无需任何服务即可在浏览器中直接加载所有依赖项。
最后，我们使用 mdjs 输出的 HTML 和 JavaScript 内容创建一个 iframe。
## 限制
为了获取议题的原始 Markdown 内容（仅限第一条消息，不包括后续评论），需要向 api.github.com 发送请求。
只有实际点击 `show demo ▹` 按钮时才需要此请求。
GitHub 匿名 API 调用严格限制为每小时 60 次。
如需更多调用次数，需要 API 密钥。（目前还无法向扩展程序提供密钥 🙈，欢迎提交功能请求。）