查看“Docsify 文件嵌入”的源代码

docsify 4.6 开始支持嵌入任何类型的文件到文档里。你可以将文件当成 <code>iframe</code>、<code>video</code>、<code>audio</code> 或者 <code>code block</code>，如果是 Markdown 文件，甚至可以直接插入到当前文档里。

这是一个嵌入 Markdown 文件的例子。

<pre class="markdown">[filename](../_media/example.md ':include')</pre>
<code>example.md</code> 文件的内容将会直接显示在这里


你可以查看原始内容对比效果。

通常情况下，这样的语法将会被当作链接处理。但是在 docsify 里，如果你添加一个 <code>:include</code> 选项，它就会被当作文件嵌入。

== 嵌入的类型 ==

当前，嵌入的类型是通过文件后缀自动识别的，这是目前支持的类型：

* '''iframe''' <code>.html</code>, <code>.htm</code>
* '''markdown''' <code>.markdown</code>, <code>.md</code>
* '''audio''' <code>.mp3</code>
* '''video''' <code>.mp4</code>, <code>.ogg</code>
* '''code''' other file extension

当然，你也可以强制设置嵌入类型。例如你想将 Markdown 文件当作一个 <code>code block</code> 嵌入。


== 嵌入代码片段 ==

有时候你并不想嵌入整个文件，可能你只想要其中的几行代码，但你还要在 CI 系统中编译和测试该文件。

<pre class="markdown">[filename](../_media/example.js ':include :type=code :fragment=demo')</pre>
在你的代码文件中，你需要用斜线 <code>/// [demo]</code> 包裹该片段（片段的前后都要有）。 你也可以使用 <code>### [demo]</code> 来包裹。


== 标签属性 ==

如果你嵌入文件是一个 <code>iframe</code>、<code>audio</code> 或者 <code>video</code>，你可以给这些标签设置属性。

<pre class="markdown">[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')</pre>
[https://cinwell.com cinwell website]

看见没？你只需要直接写属性就好了，每个标签有哪些属性建议你查看 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe MDN 文档]。

== 代码块高亮 ==

如果是嵌入一个代码块，你可以设置高亮的语言，或者让它自动识别。这里是手动设置高亮语言

<pre class="markdown">[](../_media/example.html ':include :type=code text')</pre>
⬇️

[[../_media/example.html|../_media/example.html]]


<span id="嵌入gist"></span>
== 嵌入Gist ==

你可以将 Gist 作为 Markdown 内容或代码块嵌入。这是基于嵌入文件部分开头的方法，不过是嵌入一个原始的 Gist URL。

?&gt; 这里'''不需要'''插件或修改配置来使其工作。事实上，即使你使用插件或修改配置来允许加载外部脚本，从 Gist 复制的 “Embed” <code>script</code>标签也无法加载。

<span id="确定gist的元数据"></span>
=== 确定Gist的元数据 ===

从查看<code>gist.github.com</code>上的 Gist 开始。在本指南中，我们使用这个 Gist：

* https://gist.github.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15

从 Gist 中找出以下内容：

{| class="wikitable"
|-
! 字段
! 示例
! 说明
|-
| '''Username'''
| <code>anikethsaha</code>
| Gist 的作者
|-
| '''Gist ID'''
| <code>c2bece08f27c4277001f123898d16a7c</code>
| Gist 的标识符。该标识在 Gist 的有效期内是固定的
|-
| '''Filename'''
| <code>content.md</code>
| 在 Gist 中选择一个文件名。即使是单文件的 Gist，也需要这样做才能嵌入
|}

你将需要这些来为目标文件建立 ''raw gist URL'' 。它的格式如下：

* <code>https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME</code>

下面是根据示例 Gist 举出的两个例子：

* https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md
* https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js

?&gt; 另外你也可以直接点击 Gist 文件上的 ''Raw'' 按钮来获取原始 URL。但是如果你使用这种方法，请确保'''删除'''<code>raw/</code>和文件名之间的修订号，这样 URL 就会与上面的模式一致。否则当更新 Gist 时，你嵌入的 Gist 将'''不会'''显示最新的内容。

继续下面的一个部分，将 Gist 嵌入到 Docsify 页面上。

<span id="渲染-gist-中的-markdown-内容"></span>
=== 渲染 Gist 中的 Markdown 内容 ===

这是一个很好的方法，可以将内容'''无缝'''地嵌入到你的文档中，而不需要将别人发送到外部链接。这种方法很适合在多个仓库的文档网站上重复使用一个 Gist，比如安装说明。这种方法同样适用于您的账户或其他用户拥有的 Gist。

格式：

<pre class="markdown">[LABEL](https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME ':include')</pre>
例如：

<pre class="markdown">[gist: content.md](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md ':include')</pre>
你会看到：

[https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md gist: content.md]

<code>LABEL</code>可以是任何你想要的文本。如果链接被破坏，它可以作为一个 ''fallback'' 信息。所以在这里重复文件名是很有用的，万一你需要修复一个破坏的链接。它还可以使嵌入的元素一目了然。

<span id="渲染-gist-中的代码块"></span>
=== 渲染 Gist 中的代码块 ===

格式与上一节相同，但是在alt文本中添加了<code>:type=code</code>。与嵌入的类型部分一样，语法高亮将从扩展名(如<code>.js</code>或<code>.py</code>)中'''推断'''，所以你可以将<code>type</code>设置为<code>code</code>。

格式：

<pre class="markdown">[LABEL](https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME ':include :type=code')</pre>
例如：

<pre class="markdown">[gist: script.js](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js ':include :type=code')</pre>
你会看到：

[https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js gist: script.js]