mdjs-viewer

直接在 github.com 上查看 Markdown JavaScript 演示

# Markdown JavaScript 查看器 (mdjs-viewer)

[mdjs (Markdown JavaScript)](https://www.npmjs.com/package/@mdjs/core) 允许在 Markdown 文档中执行代码并显示交互式演示。

此扩展采用此功能并直接在 github.com 上启用它。

您可以在以下位置观看现场演示

- Github Markdown 文件（如 README.md）
- Github Issues（包括编辑视图、新评论视图、新问题视图）
- ...更多已计划但尚未实施

＃＃ 安全

执行用户代码（尤其是在 github 问题中）可能很危险。
此扩展尽可能隔离代码执行。
它可以被认为与任何执行用户代码的页面（如 codepen 或 jsfiddle）一样安全。

安全措施是：

- 在没有用户操作的情况下不执行任何代码（例如需要先单击按钮）
- 在 iframe 中显示演示/执行代码
- 使用 [sandbox](https://www.w3schools.com/tags/att_iframe_sandbox.asp) 并进行以下设置 `sandbox="allow-scripts"`
- 使用数据 uri 填充 iframe
- 不允许任何请求（unpkg 除外）到达 iframe 之外

这可以防止[所有已知的攻击媒介](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自述文件](https://github.com/daKmoR/demo-wc-card)
2. [demo-wc-card问题](https://github.com/daKmoR/demo-wc-card/issues/1)

＃＃ 它是如何工作的？

它向 Markdown 页面和问题添加了一个按钮“show demo ▹”。一旦你 pss 它将获得原始的 md 文本，然后通过 [mdjs](https://www.npmjs.com/package/@mdjs/core) 和一个额外的插件来替换所有导入（相对和裸导入）带有带有 `?module` 标志的 [unpkg.com](https://unpkg.com/) url。这样所有的依赖都可以直接在浏览器中加载，不需要任何服务。

最后，我们使用 mdjs html 和 js 输出的内容创建一个 iframe。

## 限制

为了获取问题的原始 md 内容（仅第一条消息，不包含评论），需要向 api.github.com 发出请求。
仅当您实际单击“show demo ▹”按钮时才需要此请求。
每小时对 github 的匿名 api 调用有 60 次硬性限制。
如需更多信息，需要 API 密钥。 （您还不能将其提供给扩展程序🙈 - 请随时提出功能请求）