diff --git a/src/components/d2-highlight/index.vue b/src/components/d2-highlight/index.vue
index 0e838a7a..6c5c53d8 100644
--- a/src/components/d2-highlight/index.vue
+++ b/src/components/d2-highlight/index.vue
@@ -3,11 +3,12 @@
 </template>
 
 <script>
+// 相关文档
 // https://highlightjs.org/usage/
 // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
-import './styles/github-gist.css'
-import htmlFormat from './libs/htmlFormat'
 import highlight from 'highlight.js'
+import '../highlight-styles/github-gist.css'
+import htmlFormat from './libs/htmlFormat'
 export default {
   name: 'd2-highlight',
   props: {
diff --git a/src/components/d2-markdown/index.vue b/src/components/d2-markdown/index.vue
index 109d522e..292685b3 100644
--- a/src/components/d2-markdown/index.vue
+++ b/src/components/d2-markdown/index.vue
@@ -10,6 +10,7 @@
 <script>
 import marked from 'marked'
 import highlight from 'highlight.js'
+import '../highlight-styles/github-gist.css'
 import bandupan from './plugin/baidupan'
 import 'github-markdown-css'
 import { ComponentsMarkdownBase } from '@api/components.markdown'
diff --git a/src/components/d2-highlight/styles/agate.css b/src/components/highlight-styles/agate.css
similarity index 100%
rename from src/components/d2-highlight/styles/agate.css
rename to src/components/highlight-styles/agate.css
diff --git a/src/components/d2-highlight/styles/androidstudio.css b/src/components/highlight-styles/androidstudio.css
similarity index 100%
rename from src/components/d2-highlight/styles/androidstudio.css
rename to src/components/highlight-styles/androidstudio.css
diff --git a/src/components/d2-highlight/styles/arduino-light.css b/src/components/highlight-styles/arduino-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/arduino-light.css
rename to src/components/highlight-styles/arduino-light.css
diff --git a/src/components/d2-highlight/styles/arta.css b/src/components/highlight-styles/arta.css
similarity index 100%
rename from src/components/d2-highlight/styles/arta.css
rename to src/components/highlight-styles/arta.css
diff --git a/src/components/d2-highlight/styles/ascetic.css b/src/components/highlight-styles/ascetic.css
similarity index 100%
rename from src/components/d2-highlight/styles/ascetic.css
rename to src/components/highlight-styles/ascetic.css
diff --git a/src/components/d2-highlight/styles/atelier-cave-dark.css b/src/components/highlight-styles/atelier-cave-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-cave-dark.css
rename to src/components/highlight-styles/atelier-cave-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-cave-light.css b/src/components/highlight-styles/atelier-cave-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-cave-light.css
rename to src/components/highlight-styles/atelier-cave-light.css
diff --git a/src/components/d2-highlight/styles/atelier-dune-dark.css b/src/components/highlight-styles/atelier-dune-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-dune-dark.css
rename to src/components/highlight-styles/atelier-dune-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-dune-light.css b/src/components/highlight-styles/atelier-dune-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-dune-light.css
rename to src/components/highlight-styles/atelier-dune-light.css
diff --git a/src/components/d2-highlight/styles/atelier-estuary-dark.css b/src/components/highlight-styles/atelier-estuary-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-estuary-dark.css
rename to src/components/highlight-styles/atelier-estuary-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-estuary-light.css b/src/components/highlight-styles/atelier-estuary-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-estuary-light.css
rename to src/components/highlight-styles/atelier-estuary-light.css
diff --git a/src/components/d2-highlight/styles/atelier-forest-dark.css b/src/components/highlight-styles/atelier-forest-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-forest-dark.css
rename to src/components/highlight-styles/atelier-forest-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-forest-light.css b/src/components/highlight-styles/atelier-forest-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-forest-light.css
rename to src/components/highlight-styles/atelier-forest-light.css
diff --git a/src/components/d2-highlight/styles/atelier-heath-dark.css b/src/components/highlight-styles/atelier-heath-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-heath-dark.css
rename to src/components/highlight-styles/atelier-heath-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-heath-light.css b/src/components/highlight-styles/atelier-heath-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-heath-light.css
rename to src/components/highlight-styles/atelier-heath-light.css
diff --git a/src/components/d2-highlight/styles/atelier-lakeside-dark.css b/src/components/highlight-styles/atelier-lakeside-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-lakeside-dark.css
rename to src/components/highlight-styles/atelier-lakeside-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-lakeside-light.css b/src/components/highlight-styles/atelier-lakeside-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-lakeside-light.css
rename to src/components/highlight-styles/atelier-lakeside-light.css
diff --git a/src/components/d2-highlight/styles/atelier-plateau-dark.css b/src/components/highlight-styles/atelier-plateau-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-plateau-dark.css
rename to src/components/highlight-styles/atelier-plateau-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-plateau-light.css b/src/components/highlight-styles/atelier-plateau-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-plateau-light.css
rename to src/components/highlight-styles/atelier-plateau-light.css
diff --git a/src/components/d2-highlight/styles/atelier-savanna-dark.css b/src/components/highlight-styles/atelier-savanna-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-savanna-dark.css
rename to src/components/highlight-styles/atelier-savanna-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-savanna-light.css b/src/components/highlight-styles/atelier-savanna-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-savanna-light.css
rename to src/components/highlight-styles/atelier-savanna-light.css
diff --git a/src/components/d2-highlight/styles/atelier-seaside-dark.css b/src/components/highlight-styles/atelier-seaside-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-seaside-dark.css
rename to src/components/highlight-styles/atelier-seaside-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-seaside-light.css b/src/components/highlight-styles/atelier-seaside-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-seaside-light.css
rename to src/components/highlight-styles/atelier-seaside-light.css
diff --git a/src/components/d2-highlight/styles/atelier-sulphurpool-dark.css b/src/components/highlight-styles/atelier-sulphurpool-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-sulphurpool-dark.css
rename to src/components/highlight-styles/atelier-sulphurpool-dark.css
diff --git a/src/components/d2-highlight/styles/atelier-sulphurpool-light.css b/src/components/highlight-styles/atelier-sulphurpool-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atelier-sulphurpool-light.css
rename to src/components/highlight-styles/atelier-sulphurpool-light.css
diff --git a/src/components/d2-highlight/styles/atom-one-dark.css b/src/components/highlight-styles/atom-one-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/atom-one-dark.css
rename to src/components/highlight-styles/atom-one-dark.css
diff --git a/src/components/d2-highlight/styles/atom-one-light.css b/src/components/highlight-styles/atom-one-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/atom-one-light.css
rename to src/components/highlight-styles/atom-one-light.css
diff --git a/src/components/d2-highlight/styles/brown-paper.css b/src/components/highlight-styles/brown-paper.css
similarity index 100%
rename from src/components/d2-highlight/styles/brown-paper.css
rename to src/components/highlight-styles/brown-paper.css
diff --git a/src/components/d2-highlight/styles/brown-papersq.png.REMOVED.git-id b/src/components/highlight-styles/brown-papersq.png.REMOVED.git-id
similarity index 100%
rename from src/components/d2-highlight/styles/brown-papersq.png.REMOVED.git-id
rename to src/components/highlight-styles/brown-papersq.png.REMOVED.git-id
diff --git a/src/components/d2-highlight/styles/codepen-embed.css b/src/components/highlight-styles/codepen-embed.css
similarity index 100%
rename from src/components/d2-highlight/styles/codepen-embed.css
rename to src/components/highlight-styles/codepen-embed.css
diff --git a/src/components/d2-highlight/styles/color-brewer.css b/src/components/highlight-styles/color-brewer.css
similarity index 100%
rename from src/components/d2-highlight/styles/color-brewer.css
rename to src/components/highlight-styles/color-brewer.css
diff --git a/src/components/d2-highlight/styles/darcula.css b/src/components/highlight-styles/darcula.css
similarity index 100%
rename from src/components/d2-highlight/styles/darcula.css
rename to src/components/highlight-styles/darcula.css
diff --git a/src/components/d2-highlight/styles/dark.css b/src/components/highlight-styles/dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/dark.css
rename to src/components/highlight-styles/dark.css
diff --git a/src/components/d2-highlight/styles/darkula.css b/src/components/highlight-styles/darkula.css
similarity index 100%
rename from src/components/d2-highlight/styles/darkula.css
rename to src/components/highlight-styles/darkula.css
diff --git a/src/components/d2-highlight/styles/default.css b/src/components/highlight-styles/default.css
similarity index 100%
rename from src/components/d2-highlight/styles/default.css
rename to src/components/highlight-styles/default.css
diff --git a/src/components/d2-highlight/styles/docco.css b/src/components/highlight-styles/docco.css
similarity index 100%
rename from src/components/d2-highlight/styles/docco.css
rename to src/components/highlight-styles/docco.css
diff --git a/src/components/d2-highlight/styles/dracula.css b/src/components/highlight-styles/dracula.css
similarity index 100%
rename from src/components/d2-highlight/styles/dracula.css
rename to src/components/highlight-styles/dracula.css
diff --git a/src/components/d2-highlight/styles/far.css b/src/components/highlight-styles/far.css
similarity index 100%
rename from src/components/d2-highlight/styles/far.css
rename to src/components/highlight-styles/far.css
diff --git a/src/components/d2-highlight/styles/foundation.css b/src/components/highlight-styles/foundation.css
similarity index 100%
rename from src/components/d2-highlight/styles/foundation.css
rename to src/components/highlight-styles/foundation.css
diff --git a/src/components/d2-highlight/styles/github-gist.css b/src/components/highlight-styles/github-gist.css
similarity index 100%
rename from src/components/d2-highlight/styles/github-gist.css
rename to src/components/highlight-styles/github-gist.css
diff --git a/src/components/d2-highlight/styles/github.css b/src/components/highlight-styles/github.css
similarity index 100%
rename from src/components/d2-highlight/styles/github.css
rename to src/components/highlight-styles/github.css
diff --git a/src/components/d2-highlight/styles/googlecode.css b/src/components/highlight-styles/googlecode.css
similarity index 100%
rename from src/components/d2-highlight/styles/googlecode.css
rename to src/components/highlight-styles/googlecode.css
diff --git a/src/components/d2-highlight/styles/grayscale.css b/src/components/highlight-styles/grayscale.css
similarity index 100%
rename from src/components/d2-highlight/styles/grayscale.css
rename to src/components/highlight-styles/grayscale.css
diff --git a/src/components/d2-highlight/styles/gruvbox-dark.css b/src/components/highlight-styles/gruvbox-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/gruvbox-dark.css
rename to src/components/highlight-styles/gruvbox-dark.css
diff --git a/src/components/d2-highlight/styles/gruvbox-light.css b/src/components/highlight-styles/gruvbox-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/gruvbox-light.css
rename to src/components/highlight-styles/gruvbox-light.css
diff --git a/src/components/d2-highlight/styles/hopscotch.css b/src/components/highlight-styles/hopscotch.css
similarity index 100%
rename from src/components/d2-highlight/styles/hopscotch.css
rename to src/components/highlight-styles/hopscotch.css
diff --git a/src/components/d2-highlight/styles/hybrid.css b/src/components/highlight-styles/hybrid.css
similarity index 100%
rename from src/components/d2-highlight/styles/hybrid.css
rename to src/components/highlight-styles/hybrid.css
diff --git a/src/components/d2-highlight/styles/idea.css b/src/components/highlight-styles/idea.css
similarity index 100%
rename from src/components/d2-highlight/styles/idea.css
rename to src/components/highlight-styles/idea.css
diff --git a/src/components/d2-highlight/styles/ir-black.css b/src/components/highlight-styles/ir-black.css
similarity index 100%
rename from src/components/d2-highlight/styles/ir-black.css
rename to src/components/highlight-styles/ir-black.css
diff --git a/src/components/d2-highlight/styles/kimbie.dark.css b/src/components/highlight-styles/kimbie.dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/kimbie.dark.css
rename to src/components/highlight-styles/kimbie.dark.css
diff --git a/src/components/d2-highlight/styles/kimbie.light.css b/src/components/highlight-styles/kimbie.light.css
similarity index 100%
rename from src/components/d2-highlight/styles/kimbie.light.css
rename to src/components/highlight-styles/kimbie.light.css
diff --git a/src/components/d2-highlight/styles/magula.css b/src/components/highlight-styles/magula.css
similarity index 100%
rename from src/components/d2-highlight/styles/magula.css
rename to src/components/highlight-styles/magula.css
diff --git a/src/components/d2-highlight/styles/mono-blue.css b/src/components/highlight-styles/mono-blue.css
similarity index 100%
rename from src/components/d2-highlight/styles/mono-blue.css
rename to src/components/highlight-styles/mono-blue.css
diff --git a/src/components/d2-highlight/styles/monokai-sublime.css b/src/components/highlight-styles/monokai-sublime.css
similarity index 100%
rename from src/components/d2-highlight/styles/monokai-sublime.css
rename to src/components/highlight-styles/monokai-sublime.css
diff --git a/src/components/d2-highlight/styles/monokai.css b/src/components/highlight-styles/monokai.css
similarity index 100%
rename from src/components/d2-highlight/styles/monokai.css
rename to src/components/highlight-styles/monokai.css
diff --git a/src/components/d2-highlight/styles/obsidian.css b/src/components/highlight-styles/obsidian.css
similarity index 100%
rename from src/components/d2-highlight/styles/obsidian.css
rename to src/components/highlight-styles/obsidian.css
diff --git a/src/components/d2-highlight/styles/ocean.css b/src/components/highlight-styles/ocean.css
similarity index 100%
rename from src/components/d2-highlight/styles/ocean.css
rename to src/components/highlight-styles/ocean.css
diff --git a/src/components/d2-highlight/styles/paraiso-dark.css b/src/components/highlight-styles/paraiso-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/paraiso-dark.css
rename to src/components/highlight-styles/paraiso-dark.css
diff --git a/src/components/d2-highlight/styles/paraiso-light.css b/src/components/highlight-styles/paraiso-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/paraiso-light.css
rename to src/components/highlight-styles/paraiso-light.css
diff --git a/src/components/d2-highlight/styles/pojoaque.css b/src/components/highlight-styles/pojoaque.css
similarity index 100%
rename from src/components/d2-highlight/styles/pojoaque.css
rename to src/components/highlight-styles/pojoaque.css
diff --git a/src/components/d2-highlight/styles/purebasic.css b/src/components/highlight-styles/purebasic.css
similarity index 100%
rename from src/components/d2-highlight/styles/purebasic.css
rename to src/components/highlight-styles/purebasic.css
diff --git a/src/components/d2-highlight/styles/qtcreator_dark.css b/src/components/highlight-styles/qtcreator_dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/qtcreator_dark.css
rename to src/components/highlight-styles/qtcreator_dark.css
diff --git a/src/components/d2-highlight/styles/qtcreator_light.css b/src/components/highlight-styles/qtcreator_light.css
similarity index 100%
rename from src/components/d2-highlight/styles/qtcreator_light.css
rename to src/components/highlight-styles/qtcreator_light.css
diff --git a/src/components/d2-highlight/styles/railscasts.css b/src/components/highlight-styles/railscasts.css
similarity index 100%
rename from src/components/d2-highlight/styles/railscasts.css
rename to src/components/highlight-styles/railscasts.css
diff --git a/src/components/d2-highlight/styles/rainbow.css b/src/components/highlight-styles/rainbow.css
similarity index 100%
rename from src/components/d2-highlight/styles/rainbow.css
rename to src/components/highlight-styles/rainbow.css
diff --git a/src/components/d2-highlight/styles/routeros.css b/src/components/highlight-styles/routeros.css
similarity index 100%
rename from src/components/d2-highlight/styles/routeros.css
rename to src/components/highlight-styles/routeros.css
diff --git a/src/components/d2-highlight/styles/school-book.css b/src/components/highlight-styles/school-book.css
similarity index 100%
rename from src/components/d2-highlight/styles/school-book.css
rename to src/components/highlight-styles/school-book.css
diff --git a/src/components/d2-highlight/styles/solarized-dark.css b/src/components/highlight-styles/solarized-dark.css
similarity index 100%
rename from src/components/d2-highlight/styles/solarized-dark.css
rename to src/components/highlight-styles/solarized-dark.css
diff --git a/src/components/d2-highlight/styles/solarized-light.css b/src/components/highlight-styles/solarized-light.css
similarity index 100%
rename from src/components/d2-highlight/styles/solarized-light.css
rename to src/components/highlight-styles/solarized-light.css
diff --git a/src/components/d2-highlight/styles/sunburst.css b/src/components/highlight-styles/sunburst.css
similarity index 100%
rename from src/components/d2-highlight/styles/sunburst.css
rename to src/components/highlight-styles/sunburst.css
diff --git a/src/components/d2-highlight/styles/tomorrow-night-blue.css b/src/components/highlight-styles/tomorrow-night-blue.css
similarity index 100%
rename from src/components/d2-highlight/styles/tomorrow-night-blue.css
rename to src/components/highlight-styles/tomorrow-night-blue.css
diff --git a/src/components/d2-highlight/styles/tomorrow-night-bright.css b/src/components/highlight-styles/tomorrow-night-bright.css
similarity index 100%
rename from src/components/d2-highlight/styles/tomorrow-night-bright.css
rename to src/components/highlight-styles/tomorrow-night-bright.css
diff --git a/src/components/d2-highlight/styles/tomorrow-night-eighties.css b/src/components/highlight-styles/tomorrow-night-eighties.css
similarity index 100%
rename from src/components/d2-highlight/styles/tomorrow-night-eighties.css
rename to src/components/highlight-styles/tomorrow-night-eighties.css
diff --git a/src/components/d2-highlight/styles/tomorrow-night.css b/src/components/highlight-styles/tomorrow-night.css
similarity index 100%
rename from src/components/d2-highlight/styles/tomorrow-night.css
rename to src/components/highlight-styles/tomorrow-night.css
diff --git a/src/components/d2-highlight/styles/tomorrow.css b/src/components/highlight-styles/tomorrow.css
similarity index 100%
rename from src/components/d2-highlight/styles/tomorrow.css
rename to src/components/highlight-styles/tomorrow.css
diff --git a/src/components/d2-highlight/styles/vs.css b/src/components/highlight-styles/vs.css
similarity index 100%
rename from src/components/d2-highlight/styles/vs.css
rename to src/components/highlight-styles/vs.css
diff --git a/src/components/d2-highlight/styles/vs2015.css b/src/components/highlight-styles/vs2015.css
similarity index 100%
rename from src/components/d2-highlight/styles/vs2015.css
rename to src/components/highlight-styles/vs2015.css
diff --git a/src/components/d2-highlight/styles/xcode.css b/src/components/highlight-styles/xcode.css
similarity index 100%
rename from src/components/d2-highlight/styles/xcode.css
rename to src/components/highlight-styles/xcode.css
diff --git a/src/components/d2-highlight/styles/xt256.css b/src/components/highlight-styles/xt256.css
similarity index 100%
rename from src/components/d2-highlight/styles/xt256.css
rename to src/components/highlight-styles/xt256.css
diff --git a/src/components/d2-highlight/styles/zenburn.css b/src/components/highlight-styles/zenburn.css
similarity index 100%
rename from src/components/d2-highlight/styles/zenburn.css
rename to src/components/highlight-styles/zenburn.css
diff --git a/src/views/demo/components/markdown/md/doc.md b/src/views/demo/components/markdown/md/doc.md
index c1917221..189e9773 100644
--- a/src/views/demo/components/markdown/md/doc.md
+++ b/src/views/demo/components/markdown/md/doc.md
@@ -5,7 +5,22 @@
 | 0001 | FairyEver | 1711467488@qq.com |
 
 ```
-alert('Hello World')
+// 注释
+[].forEach.call($$("*"), a => {
+  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
+})
+```
+
+```
+<div>
+  <p>Hello World</p>
+</div>
+```
+
+```
+body {
+  background-color: #333;
+}
 ```
 
 一般引用
diff --git a/src/views/demo/components/markdown/source.vue b/src/views/demo/components/markdown/source.vue
index 4d1523ed..43d78e58 100644
--- a/src/views/demo/components/markdown/source.vue
+++ b/src/views/demo/components/markdown/source.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container :filename="filename">
     <template slot="header">指定资源</template>
-    <d2-markdown :source="doc"/>
+    <d2-markdown :source="doc" highlight/>
   </d2-container>
 </template>