diff --git a/docs/_media/example.html b/docs/_media/example.html
new file mode 100644
index 00000000..d35ee162
--- /dev/null
+++ b/docs/_media/example.html
@@ -0,0 +1 @@
+To infinity and Beyond!
\ No newline at end of file
diff --git a/docs/_media/example.md b/docs/_media/example.md
new file mode 100644
index 00000000..6ee64944
--- /dev/null
+++ b/docs/_media/example.md
@@ -0,0 +1 @@
+> This is from the `example.md`
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index c2e226f0..4b2bc444 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -1,24 +1,28 @@
-- Getting started
- - [Quick start](quickstart.md)
- - [Writing more pages](more-pages.md)
- - [Custom navbar](custom-navbar.md)
- - [Cover page](cover.md)
+* Getting started
-- Customization
- - [Configuration](configuration.md)
- - [Themes](themes.md)
- - [List of Plugins](plugins.md)
- - [Write a Plugin](write-a-plugin.md)
- - [Markdown configuration](markdown.md)
- - [Language highlighting](language-highlight.md)
+ * [Quick start](quickstart.md)
+ * [Writing more pages](more-pages.md)
+ * [Custom navbar](custom-navbar.md)
+ * [Cover page](cover.md)
-- Guide
- - [Deploy](deploy.md)
- - [Helpers](helpers.md)
- - [Vue compatibility](vue.md)
- - [CDN](cdn.md)
- - [Offline Mode(PWA)](pwa.md)
- - [Server-client renderer(SSR)](ssr.md)
+* Customization
-- [Awesome docsify](awesome.md)
-- [Changelog](changelog.md)
+ * [Configuration](configuration.md)
+ * [Themes](themes.md)
+ * [List of Plugins](plugins.md)
+ * [Write a Plugin](write-a-plugin.md)
+ * [Markdown configuration](markdown.md)
+ * [Language highlighting](language-highlight.md)
+
+* Guide
+
+ * [Deploy](deploy.md)
+ * [Helpers](helpers.md)
+ * [Vue compatibility](vue.md)
+ * [CDN](cdn.md)
+ * [Offline Mode(PWA)](pwa.md)
+ * [Server-client renderer(SSR)](ssr.md)
+ * [Embed Files (new)](embed-files)
+
+* [Awesome docsify](awesome.md)
+* [Changelog](changelog.md)
diff --git a/docs/de-de/_sidebar.md b/docs/de-de/_sidebar.md
index 73319c95..3cc4043f 100644
--- a/docs/de-de/_sidebar.md
+++ b/docs/de-de/_sidebar.md
@@ -1,24 +1,28 @@
-- Loslegen
- - [Schnellstart](de-de/quickstart.md)
- - [Schreiben weiterer Seiten](de-de/more-pages.md)
- - [Navigationsleiste anpassen](de-de/custom-navbar.md)
- - [Titelseite](de-de/cover.md)
+* Loslegen
-- Anpassen
- - [Einstellungen](de-de/configuration.md)
- - [Themen](de-de/themes.md)
- - [Liste der Erweiterungen](de-de/plugins.md)
- - [Schreiben eigener Erweiterungen](de-de/write-a-plugin.md)
- - [Markdown-Einstellungen](de-de/markdown.md)
- - [Hervorheben von Sprachen](de-de/language-highlight.md)
+ * [Schnellstart](de-de/quickstart.md)
+ * [Schreiben weiterer Seiten](de-de/more-pages.md)
+ * [Navigationsleiste anpassen](de-de/custom-navbar.md)
+ * [Titelseite](de-de/cover.md)
-- Guide
- - [Inbetriebnahme](de-de/deploy.md)
- - [Helfer](de-de/helpers.md)
- - [Vue Kompatibilität](de-de/vue.md)
- - [CDN](de-de/cdn.md)
- - [Offline Modus (PWA)](de-de/pwa.md)
- - [Server-client renderer (SSR)](de-de/ssr.md)
+* Anpassen
-- [Awesome docsify](de-de/awesome.md)
-- [Changelog](de-de/changelog.md)
+ * [Einstellungen](de-de/configuration.md)
+ * [Themen](de-de/themes.md)
+ * [Liste der Erweiterungen](de-de/plugins.md)
+ * [Schreiben eigener Erweiterungen](de-de/write-a-plugin.md)
+ * [Markdown-Einstellungen](de-de/markdown.md)
+ * [Hervorheben von Sprachen](de-de/language-highlight.md)
+
+* Guide
+
+ * [Inbetriebnahme](de-de/deploy.md)
+ * [Helfer](de-de/helpers.md)
+ * [Vue Kompatibilität](de-de/vue.md)
+ * [CDN](de-de/cdn.md)
+ * [Offline Modus (PWA)](de-de/pwa.md)
+ * [Server-client renderer (SSR)](de-de/ssr.md)
+ * [Embed Files (new)](de-de/embed-files)
+
+* [Awesome docsify](de-de/awesome.md)
+* [Changelog](de-de/changelog.md)
diff --git a/docs/de-de/embed-files.md b/docs/de-de/embed-files.md
new file mode 100644
index 00000000..012ce5c2
--- /dev/null
+++ b/docs/de-de/embed-files.md
@@ -0,0 +1,76 @@
+# Embed files
+
+With docsify 4.6 it is now possible to embed any type of file.
+You can embed these files as video, audio, iframes, or code blocks, and even Markdown files can even be embedded directly into the document.
+
+For example, here embedded a Markdown file. You only need to do this:
+
+```markdown
+[filename](_media/example.md ':include')
+```
+
+Then the content of `example.md` will be displayed directly here
+
+[filename](_media/example.md ':include')
+
+You can check the original content for [example.md](_media/example.md ':ignore').
+
+Normally, this will compiled into a link, but in docsify, if you add `:include` it will be embedded.
+
+## Embedded file type
+
+Currently, file extension are automatically recognized and embedded in different ways.
+
+This is a supported embedding type:
+
+* **iframe** `.html`, `.html`
+* **markdown** `.markdown`, `.md`
+* **audio** `.mp3`
+* **video** `.mp4`, `.ogg`
+* **code** other file extension
+
+Of course, you can force the specified. For example, you want to Markdown file as code block embedded.
+
+```markdown
+[filename](_media/example.md ':include :type=code')
+```
+
+You will get it
+
+[filename](_media/example.md ':include :type=code')
+
+## Tag attribute
+
+If you embed the file as `iframe`, `audio` and `video`, then you may need to set the attributes of these tags.
+
+```markdown
+[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
+```
+
+[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
+
+Did you see it? You only need to write directly. You can check [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) for these attributes.
+
+## The code block highlight
+
+Embedding any type of source code file, you can specify the highlighted language or automatically identify.
+
+```markdown
+[](_media/example.html ':include :type=code')
+```
+
+⬇️
+
+[](_media/example.html ':include :type=code')
+
+Or Specify the language
+
+```markdown
+[](_media/example.html ':include :type=code text')
+```
+
+⬇️
+
+[](_media/example.html ':include :type=code text')
+
+?> How to set highlight? You can see [here](language-highlight.md).
diff --git a/docs/embed-files.md b/docs/embed-files.md
new file mode 100644
index 00000000..012ce5c2
--- /dev/null
+++ b/docs/embed-files.md
@@ -0,0 +1,76 @@
+# Embed files
+
+With docsify 4.6 it is now possible to embed any type of file.
+You can embed these files as video, audio, iframes, or code blocks, and even Markdown files can even be embedded directly into the document.
+
+For example, here embedded a Markdown file. You only need to do this:
+
+```markdown
+[filename](_media/example.md ':include')
+```
+
+Then the content of `example.md` will be displayed directly here
+
+[filename](_media/example.md ':include')
+
+You can check the original content for [example.md](_media/example.md ':ignore').
+
+Normally, this will compiled into a link, but in docsify, if you add `:include` it will be embedded.
+
+## Embedded file type
+
+Currently, file extension are automatically recognized and embedded in different ways.
+
+This is a supported embedding type:
+
+* **iframe** `.html`, `.html`
+* **markdown** `.markdown`, `.md`
+* **audio** `.mp3`
+* **video** `.mp4`, `.ogg`
+* **code** other file extension
+
+Of course, you can force the specified. For example, you want to Markdown file as code block embedded.
+
+```markdown
+[filename](_media/example.md ':include :type=code')
+```
+
+You will get it
+
+[filename](_media/example.md ':include :type=code')
+
+## Tag attribute
+
+If you embed the file as `iframe`, `audio` and `video`, then you may need to set the attributes of these tags.
+
+```markdown
+[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
+```
+
+[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
+
+Did you see it? You only need to write directly. You can check [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) for these attributes.
+
+## The code block highlight
+
+Embedding any type of source code file, you can specify the highlighted language or automatically identify.
+
+```markdown
+[](_media/example.html ':include :type=code')
+```
+
+⬇️
+
+[](_media/example.html ':include :type=code')
+
+Or Specify the language
+
+```markdown
+[](_media/example.html ':include :type=code text')
+```
+
+⬇️
+
+[](_media/example.html ':include :type=code text')
+
+?> How to set highlight? You can see [here](language-highlight.md).
diff --git a/docs/zh-cn/_sidebar.md b/docs/zh-cn/_sidebar.md
index a024a54a..03f78c86 100644
--- a/docs/zh-cn/_sidebar.md
+++ b/docs/zh-cn/_sidebar.md
@@ -1,24 +1,28 @@
-- 入门
- - [快速开始](zh-cn/quickstart.md)
- - [多页文档](zh-cn/more-pages.md)
- - [定制导航栏](zh-cn/custom-navbar.md)
- - [封面](zh-cn/cover.md)
+* 入门
-- 定制化
- - [配置项](zh-cn/configuration.md)
- - [主题](zh-cn/themes.md)
- - [插件列表](zh-cn/plugins.md)
- - [开发插件](zh-cn/write-a-plugin.md)
- - [Markdown 配置](zh-cn/markdown.md)
- - [代码高亮](zh-cn/language-highlight.md)
+ * [快速开始](zh-cn/quickstart.md)
+ * [多页文档](zh-cn/more-pages.md)
+ * [定制导航栏](zh-cn/custom-navbar.md)
+ * [封面](zh-cn/cover.md)
-- 指南
- - [部署](zh-cn/deploy.md)
- - [文档助手](zh-cn/helpers.md)
- - [兼容 Vue](zh-cn/vue.md)
- - [CDN](zh-cn/cdn.md)
- - [离线模式(PWA)](zh-cn/pwa.md)
- - [服务端渲染 (SSR)](zh-cn/ssr.md)
+* 定制化
-- [Awesome docsify](zh-cn/awesome.md)
-- [Changelog](zh-cn/changelog.md)
+ * [配置项](zh-cn/configuration.md)
+ * [主题](zh-cn/themes.md)
+ * [插件列表](zh-cn/plugins.md)
+ * [开发插件](zh-cn/write-a-plugin.md)
+ * [Markdown 配置](zh-cn/markdown.md)
+ * [代码高亮](zh-cn/language-highlight.md)
+
+* 指南
+
+ * [部署](zh-cn/deploy.md)
+ * [文档助手](zh-cn/helpers.md)
+ * [兼容 Vue](zh-cn/vue.md)
+ * [CDN](zh-cn/cdn.md)
+ * [离线模式(PWA)](zh-cn/pwa.md)
+ * [服务端渲染 (SSR)](zh-cn/ssr.md)
+ * [文件嵌入(new)](zh-cn/embed-files)
+
+* [Awesome docsify](zh-cn/awesome.md)
+* [Changelog](zh-cn/changelog.md)
diff --git a/docs/zh-cn/embed-files.md b/docs/zh-cn/embed-files.md
new file mode 100644
index 00000000..e3140ba7
--- /dev/null
+++ b/docs/zh-cn/embed-files.md
@@ -0,0 +1,73 @@
+# 文件嵌入
+
+docsify 4.6 开始支持嵌入任何类型的文件到文档里。你可以将文件当成 `iframe`、`video`、`audio` 或者 `code block`，如果是 Markdown 文件，甚至可以直接插入到当前文档里。
+
+这是一个嵌入 Markdown 文件的例子。
+
+```markdown
+[filename](_media/example.md ':include')
+```
+
+`example.md` 文件的内容将会直接显示在这里
+
+[filename](_media/example.md ':include')
+
+你可以查看 [example.md](_media/example.md ':ignore') 原始内容对比效果。
+
+通常情况下，这样的语法将会被当作链接处理。但是在 docsify 里，如果你添加一个 `:include` 选项，它就会被当作文件嵌入。
+
+## 嵌入的类型
+
+当前，嵌入的类型是通过文件后缀自动识别的，这是目前支持的类型：
+
+* **iframe** `.html`, `.html`
+* **markdown** `.markdown`, `.md`
+* **audio** `.mp3`
+* **video** `.mp4`, `.ogg`
+* **code** other file extension
+
+当然，你也可以强制设置嵌入类型。例如你想将 Markdown 文件当作一个 `code block` 嵌入。
+
+```markdown
+[filename](_media/example.md ':include :type=code')
+```
+
+你将得到
+
+[filename](_media/example.md ':include :type=code')
+
+## 标签属性
+
+如果你嵌入文件是一个 `iframe`、`audio` 或者 `video`，你可以给这些标签设置属性。
+
+```markdown
+[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
+```
+
+[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
+
+看见没？你只需要直接写属性就好了，每个标签有哪些属性建议你查看 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)。
+
+## 代码块高亮
+
+如果是嵌入一个代码块，你可以设置高亮的语言，或者让它自动识别。
+
+```markdown
+[](_media/example.html ':include :type=code')
+```
+
+⬇️
+
+[](_media/example.html ':include :type=code')
+
+这里是手动设置高亮语言
+
+```markdown
+[](_media/example.html ':include :type=code text')
+```
+
+⬇️
+
+[](_media/example.html ':include :type=code text')
+
+?> 如何高亮代码？你可以查看[这份文档](language-highlight.md).
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index a569bfde..133327e4 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -17,7 +17,8 @@ function getAndRemoveConfig (str = '') {
if (str) {
str = str
.replace(/:([\w-]+)=?([\w-]+)?/g, (m, key, value) => {
- config[key] = value || true
+ console.log(key, value)
+ config[key] = (value && value.replace(/"/g, '')) || true
return ''
})
.trim()
@@ -26,7 +27,7 @@ function getAndRemoveConfig (str = '') {
return { str, config }
}
const compileMedia = {
- markdown (url, config) {
+ markdown (url) {
const id = `docsify-get-${uid++}`
if (!process.env.SSR) {
@@ -45,20 +46,21 @@ const compileMedia = {
`
}
},
- html (url, config) {
- return ``
+ iframe (url, title) {
+ console.log(title)
+ return ``
},
- video (url, config) {
- return ``
+ video (url, title) {
+ return ``
},
- audio (url, config) {
- return ``
+ audio (url, title) {
+ return ``
},
- code (url, config) {
+ code (url, title) {
const id = `docsify-get-${uid++}`
let ext = url.match(/\.(\w+)$/)
- ext = config.lang || (ext && ext[1])
+ ext = title || (ext && ext[1])
if (ext === 'md') ext = 'markdown'
if (!process.env.SSR) {
@@ -192,20 +194,18 @@ export class Compiler {
return media.call(_self, href, title)
}
- let type = null
+ let type = 'code'
if (/\.(md|markdown)/.test(href)) {
type = 'markdown'
} else if (/\.html?/.test(href)) {
- type = 'html'
+ type = 'iframe'
} else if (/\.(mp4|ogg)/.test(href)) {
type = 'video'
} else if (/\.mp3/.test(href)) {
type = 'audio'
}
- console.log(href)
- if (type) {
- return compileMedia[type].call(_self, href, title)
- }
+
+ return compileMedia[type].call(_self, href, title)
}
if (