直接在 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 密钥。 （您还不能将其提供给扩展程序
mdjs-viewer插件谷歌浏览器安装教程
第一步：下载mdjs-viewer安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
