fix: 修改代码主题

docs/.vuepress/config.js

-const { slugify } = require('@vuepress/shared-utils')
-const translatePlugin = require('./markdown/translate')
-const headerPlugin = require('./markdown/header')
-const createSidebar = require('./markdown/createSidebar')
-const { simplifySlugText, tabs } = require('./utils')
 
+const { slugify } = require("@vuepress/shared-utils");
+const translatePlugin = require("./markdown/translate");
+const headerPlugin = require("./markdown/header");
+const createSidebar = require("./markdown/createSidebar");
+const { simplifySlugText } = require("./utils");
+
+const tabs = [
+  "/uniCloud/",
+  "/plugin/",
+  "/worktile/",
+  "/tutorial/",
+  "/collocation/",
+  "/component/",
+  "/api/",
+  "/",
+];
 const config = {
   // TODO use theme
-  title: 'uni-app官网',
+  title: "uni-app官网",
   head: [
-    ['link', {
-      rel: 'shortcut icon',
-      type: 'image/x-icon',
-      href: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/d23e842c-58fc-4574-998d-17fdc7811cc3.png?v=1556263038788'
-    }]
+    [
+      "link",
+      {
+        rel: "shortcut icon",
+        type: "image/x-icon",
+        href: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/d23e842c-58fc-4574-998d-17fdc7811cc3.png?v=1556263038788",
+      },
+    ],
   ],
   locales: {
-    '/': {
-      lang: 'zh-CN',
-    }
+    "/": {
+      lang: "zh-CN",
+    },
   },
   themeConfig: {
-    titleLogo: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/1ae87107-2943-4ba6-be2b-390ca27c6260.png',
-    logo: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/5a7f902b-21a7-4822-884f-925219eacc4b.png',
+    titleLogo:
+      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/1ae87107-2943-4ba6-be2b-390ca27c6260.png",
+    logo: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/5a7f902b-21a7-4822-884f-925219eacc4b.png",
     // TODO use plugin/theme
     sidebar: createSidebar(tabs),
     // sidebarDepth: 2,
     nextLinks: false,
     prevLinks: false,
     // TODO use theme
-    repo: 'dcloudio/uni-app',
-    docsRepo: 'https://gitee.com/dcloud/unidocs-zh',
-    docsBranch: 'master',
-    docsDir: 'docs',
+    repo: "dcloudio/uni-app",
+    docsRepo: "https://gitee.com/dcloud/unidocs-zh",
+    docsBranch: "master",
+    docsDir: "docs",
     editLinks: true,
-    editLinkText: '帮助我们改善此页面！',
-    lastUpdated: '上次更新',
+    editLinkText: "帮助我们改善此页面！",
+    lastUpdated: "上次更新",
     // smoothScroll: true,
     algolia: {
-      apiKey: '2fdcc4e76c8e260671ad70065e60b2e7',
-      indexName: 'zh-uniapp',
-      appId: 'PQIR5NL8CZ',
-      searchParameters: { hitsPerPage: 50 }
-    }
+      apiKey: "2fdcc4e76c8e260671ad70065e60b2e7",
+      indexName: "zh-uniapp",
+      appId: "PQIR5NL8CZ",
+      searchParameters: { hitsPerPage: 50 },
+    },
   },
   markdown: {
     slugify(str) {
-      if (typeof str !== 'string') return ''
+      if (typeof str !== "string") return "";
 
-      let slug = str
-      if (slug.includes('@')) {
-        let array = slug.split('@')
-        slug = array.length > 1 ? array[array.length - 1] : str
+      let slug = str;
+      if (slug.includes("@")) {
+        let array = slug.split("@");
+        slug = array.length > 1 ? array[array.length - 1] : str;
       } else {
-        slug = simplifySlugText(slug.toLowerCase()).trim()
+        slug = simplifySlugText(slug.toLowerCase()).trim();
       }
-      return slugify(slug)
+      return slugify(slug);
     },
-    extractHeaders: ['h1', 'h2', 'h3', 'h4'],
-    chainMarkdown(config) {
+    extractHeaders: ["h1", "h2", "h3", "h4"],
+    async chainMarkdown(config) {
       config
-        .plugin('translate')
+        .plugin("translate")
         .use(translatePlugin)
         .end()
-        .plugin('convert-header')
+        .plugin("convert-header")
         .use(headerPlugin)
         .end()
-        .plugin('normallize-link')
-        .use(require('./markdown/normallizeLink'))
-    }
-  }
-}
+        .plugin("normallize-link")
+        .use(require("./markdown/normallizeLink"));
+    },
+  },
+  plugins: [
+    [require('./markdown/highlighter'),{
+      theme: "material-palenight",
+      // langs:[]
+    }]
+  ],
+};
 
-module.exports = config
\ No newline at end of file
+module.exports = config;

docs/.vuepress/markdown/highlighter.js

+/**
+ * doc : https://shiki.matsu.io/
+ * @param {} param 
+ * @param {*} context 
+ * @returns 
+ */
+const {
+	logger,
+	chalk,
+	escapeHtml
+} = require('@vuepress/shared-utils')
+
+function wrap(code, lang) {
+	if (lang === 'text') {
+		code = escapeHtml(code)
+	}
+	return `<pre v-pre><code>${code}</code></pre>`
+	// return code
+}
+
+const langType = [
+	'abap', 'actionscript-3', 'ada', 'apache', 'apex', 'apl', 'applescript', 'asm', 'astro', 'awk', 'ballerina',
+	'bat', 'batch', 'berry', 'be', 'bibtex', 'bicep', 'c', 'cadence', 'cdc', 'clojure', 'clj', 'cobol', 'codeql',
+	'ql', 'coffee', 'cpp', 'crystal', 'csharp', 'c#', 'css', 'cue', 'd', 'dart', 'diff', 'docker', 'dream-maker',
+	'elixir', 'elm', 'erb', 'erlang', 'fish', 'fsharp', 'f#', 'gherkin', 'git-commit', 'git-rebase', 'glsl',
+	'gnuplot', 'go', 'graphql', 'groovy', 'hack', 'haml', 'handlebars', 'hbs', 'haskell', 'hcl', 'hlsl', 'html',
+	'ini', 'java', 'javascript', 'js', 'jinja-html', 'json', 'jsonc', 'jsonnet', 'jssm', 'fsl', 'jsx', 'julia',
+	'kotlin', 'latex', 'less', 'liquid', 'lisp', 'logo', 'lua', 'make', 'makefile', 'markdown', 'md', 'marko',
+	'matlab', 'mdx', 'mermaid', 'nginx', 'nim', 'nix', 'objective-c', 'objc', 'objective-cpp', 'ocaml', 'pascal',
+	'perl', 'php', 'plsql', 'postcss', 'powershell', 'ps', 'ps1', 'prisma', 'prolog', 'pug', 'jade', 'puppet',
+	'purescript', 'python', 'py', 'r', 'raku', 'perl6', 'razor', 'rel', 'riscv', 'rst', 'ruby', 'rb', 'rust', 'rs',
+	'sas', 'sass', 'scala', 'scheme', 'scss', 'shaderlab', 'shader', 'shellscript', 'shell', 'bash', 'sh', 'zsh',
+	'smalltalk', 'solidity', 'sparql', 'sql', 'ssh-config', 'stata', 'stylus', 'styl', 'svelte', 'swift',
+	'system-verilog', 'tasl', 'tcl', 'tex', 'toml', 'tsx', 'turtle', 'twig', 'typescript', 'ts', 'vb', 'cmd',
+	'verilog', 'vhdl', 'viml', 'vim', 'vimscript', 'vue-html', 'vue', 'wasm', 'wenyan', '文言', 'xml', 'xsl', 'yaml',
+	'zenscript'
+]
+
+module.exports = ({
+	theme = "nord",
+	langs = []
+}, context) => ({
+	name: "custom-shiki",
+	async extendMarkdown(md) {
+		const shiki = require("shiki");
+		const highlighter = await shiki.getHighlighter({
+			theme,
+			langs,
+		});
+		md.options.highlight = (code, lang) => {
+			if (!lang) { 
+				lang = 'text'
+			}else{
+				if(langType.indexOf(lang) === -1){ 
+					logger.warn(chalk.yellow(`[vuepress] Syntax highlight for language "${lang}" is not supported.`))
+					lang = 'text'
+				}
+			}
+			let mdCode = highlighter.codeToHtml(code, lang);
+			//  mdCode = highlighter.codeToHtml(code, {lang,theme});
+			return wrap(mdCode, lang);
+		};
+	},
+});

docs/.vuepress/theme/global-components/CodeSimulator.vue

@@ -142,7 +142,8 @@ export default {
     user-select:none;
 }
 .pages-tabs--active {
-	background:#282c34;
+	// background:#282c34;
+	background-color: #292d3e;
 	color: #fff;
 	font-weight: bold;
 }
@@ -151,7 +152,7 @@ export default {
 	width: 100%;
 	height: 100%;
 	border-radius: 0;
-	overflow: hidden;
+	overflow: auto;
 
 }
 .page-snippet pre[class*="language-"]{
@@ -159,7 +160,7 @@ export default {
 	padding: 20px 20px;
 	width: 100%;
 	height: 100%;
-	overflow: auto;
+	// overflow: auto;
 	box-sizing: border-box;
 }
 .code-iframe {

docs/.vuepress/theme/styles/custom-block.styl

+/**
+ * Colors Base
+ *
+ * These are the pure base color presets. Most of the time, you should not be
+ * using these colors directly in the theme but rather use "Colors Theme"
+ * instead because those are "Theme (light or dark)" dependant.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f9f9f9;
+  --vt-c-white-mute: #f1f1f1;
+
+  --vt-c-black: #1a1a1a;
+  --vt-c-black-pure: #000000;
+  --vt-c-black-soft: #242424;
+  --vt-c-black-mute: #2f2f2f;
+
+  --vt-c-indigo: #213547;
+  --vt-c-indigo-soft: #476582;
+  --vt-c-indigo-light: #aac8e4;
+
+  --vt-c-gray: #8e8e8e;
+  --vt-c-gray-light-1: #aeaeae;
+  --vt-c-gray-light-2: #c7c7c7;
+  --vt-c-gray-light-3: #d1d1d1;
+  --vt-c-gray-light-4: #e5e5e5;
+  --vt-c-gray-light-5: #f2f2f2;
+  --vt-c-gray-dark-1: #636363;
+  --vt-c-gray-dark-2: #484848;
+  --vt-c-gray-dark-3: #3a3a3a;
+  --vt-c-gray-dark-4: #282828;
+  --vt-c-gray-dark-5: #202020;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.70);
+  --vt-c-text-light-3: rgba(60, 60, 60, 0.33);
+  --vt-c-text-light-4: rgba(60, 60, 60, 0.18);
+  --vt-c-text-light-code: var(--vt-c-indigo-soft);
+
+  --vt-c-text-dark-1: rgba(255, 255, 255, 0.87);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.60);
+  --vt-c-text-dark-3: rgba(235, 235, 235, 0.38);
+  --vt-c-text-dark-4: rgba(235, 235, 235, 0.18);
+  --vt-c-text-dark-code: var(--vt-c-indigo-light);
+
+  --vt-c-green: #42b883;
+  --vt-c-green-light: #42d392;
+  --vt-c-green-lighter: #35eb9a;
+  --vt-c-green-dark: #33a06f;
+  --vt-c-green-darker: #155f3e;
+
+  --vt-c-blue: #3b8eed;
+  --vt-c-blue-light: #549ced;
+  --vt-c-blue-lighter: #50a2ff;
+  --vt-c-blue-dark: #3468a3;
+  --vt-c-blue-darker: #255489;
+
+  --vt-c-yellow: #ffc517;
+  --vt-c-yellow-light: #ffe417;
+  --vt-c-yellow-lighter: #ffff17;
+  --vt-c-yellow-dark: #e0ad15;
+  --vt-c-yellow-darker: #bc9112;
+
+  --vt-c-red: #ed3c50;
+  --vt-c-red-light: #f43771;
+  --vt-c-red-lighter: #fd1d7c;
+  --vt-c-red-dark: #cd2d3f;
+  --vt-c-red-darker: #ab2131;
+
+  --vt-c-purple: #de41e0;
+  --vt-c-purple-light: #e936eb;
+  --vt-c-purple-lighter: #f616f8;
+  --vt-c-purple-dark: #823c83;
+  --vt-c-purple-darker: #602960;
+}
+
+/**
+ * Colors Theme
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-c-bg: var(--vt-c-white);
+  --vt-c-bg-soft: var(--vt-c-white-soft);
+  --vt-c-bg-mute: var(--vt-c-white-mute);
+
+  --vt-c-divider: var(--vt-c-divider-light-1);
+  --vt-c-divider-light: var(--vt-c-divider-light-2);
+
+  --vt-c-divider-inverse: var(--vt-c-divider-dark-1);
+  --vt-c-divider-inverse-light: var(--vt-c-divider-dark-2);
+
+  --vt-c-text-1: var(--vt-c-text-light-1);
+  --vt-c-text-2: var(--vt-c-text-light-2);
+  --vt-c-text-3: var(--vt-c-text-light-3);
+  --vt-c-text-4: var(--vt-c-text-light-4);
+  --vt-c-text-code: var(--vt-c-text-light-code);
+
+  --vt-c-text-inverse-1: var(--vt-c-text-dark-1);
+  --vt-c-text-inverse-2: var(--vt-c-text-dark-2);
+  --vt-c-text-inverse-3: var(--vt-c-text-dark-3);
+  --vt-c-text-inverse-4: var(--vt-c-text-dark-4);
+
+  --vt-c-brand: var(--vt-c-green);
+  --vt-c-brand-light: var(--vt-c-green-light);
+  --vt-c-brand-dark: var(--vt-c-green-dark);
+  --vt-c-brand-highlight: var(--vt-c-brand-dark);
+}
+
+.dark {
+  --vt-c-bg: var(--vt-c-black);
+  --vt-c-bg-soft: var(--vt-c-black-soft);
+  --vt-c-bg-mute: var(--vt-c-black-mute);
+
+  --vt-c-divider: var(--vt-c-divider-dark-1);
+  --vt-c-divider-light: var(--vt-c-divider-dark-2);
+
+  --vt-c-divider-inverse: var(--vt-c-divider-light-1);
+  --vt-c-divider-inverse-light: var(--vt-c-divider-light-2);
+
+  --vt-c-text-1: var(--vt-c-text-dark-1);
+  --vt-c-text-2: var(--vt-c-text-dark-2);
+  --vt-c-text-3: var(--vt-c-text-dark-3);
+  --vt-c-text-4: var(--vt-c-text-dark-4);
+  --vt-c-text-code: var(--vt-c-text-dark-code);
+
+  --vt-c-text-inverse-1: var(--vt-c-text-light-1);
+  --vt-c-text-inverse-2: var(--vt-c-text-light-2);
+  --vt-c-text-inverse-3: var(--vt-c-text-light-3);
+  --vt-c-text-inverse-4: var(--vt-c-text-light-4);
+
+  --vt-c-brand-highlight: var(--vt-c-brand-light);
+}
+
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-font-family-base: Inter, -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --vt-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+/**
+ * Shadows
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --vt-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --vt-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --vt-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --vt-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+/**
+ * Magic Numbers
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-nav-height: 55px;
+}
+
+.custom-block .custom-block-title {
+	margin-top 0
+	font-weight 600
+	margin-bottom -0.4rem
+}
+
+.custom-block.tip,.custom-block.warning,.custom-block.danger,.custom-block.details {
+	padding 20px 24px 4px 50px
+	border-left-width .5rem
+	border-left-style solid
+	margin 1rem 0
+}
+
+.custom-block.tip {
+	color: rgba(0, 0, 0, 0.55);
+	border-color #42b983
+}
+.custom-block.warning {
+	background-color rgba(255,229,100,.3)
+	background-color: var(--vt-c-bg-soft);
+	color: rgba(0, 0, 0, 0.55);
+}
+
+.custom-block.warning .custom-block-title  {
+	color: var(--vt-c-text-1);
+}
+
+.custom-block.warning a{
+	color $textColor
+}
+
+.custom-block.danger {
+	background-color: var(--vt-c-bg-soft);
+	border-color darken(red, 20%)
+	color: rgba(0, 0, 0, 0.55);
+}
+
+.custom-block.danger .custom-block-title  {
+	color: var(--vt-c-text-1);
+}
+
+.custom-block.danger a{
+	color $textColor
+}
+
+.custom-block.details {
+	display block
+	position relative
+	border-radius 2px
+	margin 1.6em 0
+	background-color: var(--vt-c-bg-soft);
+}
+
+.custom-block.details h4 {
+	margin-top 0
+}
+
+.custom-block.details figure:last-child{
+	  margin-bottom 0
+	  padding-bottom 0
+}
+
+.custom-block.details p:last-child{
+	  margin-bottom 0
+	  padding-bottom 0
+}
+      
+.custom-block.details summary {
+	outline none
+	cursor pointer
+	margin-bottom 1.0em
+}
+     
+.custom-block {
+  margin: 28px 0;
+  padding: 20px 24px 4px 50px;
+  border-radius: 8px;
+  overflow-x: auto;
+  transition: color 0.5s, background-color 0.5s;
+  position: relative;
+  font-size: 14px;
+  line-height: 1.6;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.55);
+  background-color: var(--vt-c-bg-soft);
+}
+
+.dark .custom-block {
+  color: var(--vt-c-text-2);
+}
+
+.custom-block:before {
+  content: 'ⓘ';
+  position: absolute;
+  font-weight: 600;
+  font-size: 15px;
+  top: 20px;
+  left: 17px;
+}
+
+.custom-block.warning:before,
+.custom-block.danger:before {
+  content: '⚠';
+  font-size: 17px;
+  top: 19px;
+  left: 16ppx;
+}
+
+.custom-block .custom-block-title {
+  margin-bottom: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--vt-c-text-1);
+  transition: color 0.5s;
+}
+
+.custom-block.tip {
+  border: 1px solid var(--vt-c-brand);
+}
+.custom-block.tip:before {
+  color: var(--vt-c-brand);
+}
+
+.custom-block.warning {
+  border: 1px solid var(--vt-c-yellow);
+}
+.custom-block.warning:before {
+  color: var(--vt-c-yellow);
+}
+
+.custom-block.danger {
+  border: 1px solid var(--vt-c-red);
+}
+.custom-block.danger .custom-block-title,
+.custom-block.danger:before {
+  color: var(--vt-c-red);
+}
+
+.custom-block ul li:before {
+  top: 0.55rem;
+}
+.custom-block ol li:before {
+  top: 1px;
+  font-size: 13px;
+}
+
+.custom-block :not(pre) > code {
+  font-size: 13px;
+  background-color: rgba(27, 31, 35, 0.05);
+}
+
+.dark .custom-block :not(pre) > code {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.custom-block.danger a,
+.custom-block.warning a {
+  color: var(--vt-c-text-code);
+}

docs/.vuepress/theme/styles/doc-code.styl

+
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f9f9f9;
+  --vt-c-white-mute: #f1f1f1;
+
+  --vt-c-black: #1a1a1a;
+  --vt-c-black-pure: #000000;
+  --vt-c-black-soft: #242424;
+  --vt-c-black-mute: #2f2f2f;
+
+  --vt-c-indigo: #213547;
+  --vt-c-indigo-soft: #476582;
+  --vt-c-indigo-light: #aac8e4;
+
+  --vt-c-gray: #8e8e8e;
+  --vt-c-gray-light-1: #aeaeae;
+  --vt-c-gray-light-2: #c7c7c7;
+  --vt-c-gray-light-3: #d1d1d1;
+  --vt-c-gray-light-4: #e5e5e5;
+  --vt-c-gray-light-5: #f2f2f2;
+  --vt-c-gray-dark-1: #636363;
+  --vt-c-gray-dark-2: #484848;
+  --vt-c-gray-dark-3: #3a3a3a;
+  --vt-c-gray-dark-4: #282828;
+  --vt-c-gray-dark-5: #202020;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.70);
+  --vt-c-text-light-3: rgba(60, 60, 60, 0.33);
+  --vt-c-text-light-4: rgba(60, 60, 60, 0.18);
+  --vt-c-text-light-code: var(--vt-c-indigo-soft);
+
+  --vt-c-text-dark-1: rgba(255, 255, 255, 0.87);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.60);
+  --vt-c-text-dark-3: rgba(235, 235, 235, 0.38);
+  --vt-c-text-dark-4: rgba(235, 235, 235, 0.18);
+  --vt-c-text-dark-code: var(--vt-c-indigo-light);
+
+  --vt-c-green: #42b883;
+  --vt-c-green-light: #42d392;
+  --vt-c-green-lighter: #35eb9a;
+  --vt-c-green-dark: #33a06f;
+  --vt-c-green-darker: #155f3e;
+
+  --vt-c-blue: #3b8eed;
+  --vt-c-blue-light: #549ced;
+  --vt-c-blue-lighter: #50a2ff;
+  --vt-c-blue-dark: #3468a3;
+  --vt-c-blue-darker: #255489;
+
+  --vt-c-yellow: #ffc517;
+  --vt-c-yellow-light: #ffe417;
+  --vt-c-yellow-lighter: #ffff17;
+  --vt-c-yellow-dark: #e0ad15;
+  --vt-c-yellow-darker: #bc9112;
+
+  --vt-c-red: #ed3c50;
+  --vt-c-red-light: #f43771;
+  --vt-c-red-lighter: #fd1d7c;
+  --vt-c-red-dark: #cd2d3f;
+  --vt-c-red-darker: #ab2131;
+
+  --vt-c-purple: #de41e0;
+  --vt-c-purple-light: #e936eb;
+  --vt-c-purple-lighter: #f616f8;
+  --vt-c-purple-dark: #823c83;
+  --vt-c-purple-darker: #602960;
+}
+
+/**
+ * Colors Theme
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-c-bg: var(--vt-c-white);
+  --vt-c-bg-soft: var(--vt-c-white-soft);
+  --vt-c-bg-mute: var(--vt-c-white-mute);
+
+  --vt-c-divider: var(--vt-c-divider-light-1);
+  --vt-c-divider-light: var(--vt-c-divider-light-2);
+
+  --vt-c-divider-inverse: var(--vt-c-divider-dark-1);
+  --vt-c-divider-inverse-light: var(--vt-c-divider-dark-2);
+
+  --vt-c-text-1: var(--vt-c-text-light-1);
+  --vt-c-text-2: var(--vt-c-text-light-2);
+  --vt-c-text-3: var(--vt-c-text-light-3);
+  --vt-c-text-4: var(--vt-c-text-light-4);
+  --vt-c-text-code: var(--vt-c-text-light-code);
+
+  --vt-c-text-inverse-1: var(--vt-c-text-dark-1);
+  --vt-c-text-inverse-2: var(--vt-c-text-dark-2);
+  --vt-c-text-inverse-3: var(--vt-c-text-dark-3);
+  --vt-c-text-inverse-4: var(--vt-c-text-dark-4);
+
+  --vt-c-brand: var(--vt-c-green);
+  --vt-c-brand-light: var(--vt-c-green-light);
+  --vt-c-brand-dark: var(--vt-c-green-dark);
+  --vt-c-brand-highlight: var(--vt-c-brand-dark);
+}
+
+.dark {
+  --vt-c-bg: var(--vt-c-black);
+  --vt-c-bg-soft: var(--vt-c-black-soft);
+  --vt-c-bg-mute: var(--vt-c-black-mute);
+
+  --vt-c-divider: var(--vt-c-divider-dark-1);
+  --vt-c-divider-light: var(--vt-c-divider-dark-2);
+
+  --vt-c-divider-inverse: var(--vt-c-divider-light-1);
+  --vt-c-divider-inverse-light: var(--vt-c-divider-light-2);
+
+  --vt-c-text-1: var(--vt-c-text-dark-1);
+  --vt-c-text-2: var(--vt-c-text-dark-2);
+  --vt-c-text-3: var(--vt-c-text-dark-3);
+  --vt-c-text-4: var(--vt-c-text-dark-4);
+  --vt-c-text-code: var(--vt-c-text-dark-code);
+
+  --vt-c-text-inverse-1: var(--vt-c-text-light-1);
+  --vt-c-text-inverse-2: var(--vt-c-text-light-2);
+  --vt-c-text-inverse-3: var(--vt-c-text-light-3);
+  --vt-c-text-inverse-4: var(--vt-c-text-light-4);
+
+  --vt-c-brand-highlight: var(--vt-c-brand-light);
+}
+
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-font-family-base: Inter, -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --vt-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+/**
+ * Shadows
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --vt-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --vt-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --vt-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --vt-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+/**
+ * Magic Numbers
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vt-nav-height: 55px;
+}
+
+
+
+.page {
+  --vt-doc-code-font-size: 14px;
+  --vt-doc-code-line-height: 1.5;
+}
+
+/* inline code */
+.page :not(pre) > code {
+  background-color: var(--vt-c-bg-mute);
+  padding: 0.15em 0.5em;
+  border-radius: 4px;
+  color: var(--vt-c-text-code);
+  transition: color 0.5s, background-color 0.5s;
+}
+
+.page a > code {
+  color: var(--vt-c-brand-dark);
+}
+
+.page :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: var(--vt-doc-code-font-size);
+}
+
+@media (min-width: 768px) {
+  .page :not(pre) > code {
+    white-space: nowrap;
+  }
+}
+
+.page div[class*='language-'] {
+  position: relative;
+  margin: 28px -24px;
+  background-color: #292d3e;
+  overflow-x: auto;
+  transition: background-color 0.5s;
+}
+
+.dark .page div[class*='language-'] {
+  background-color: var(--vt-c-bg-soft);
+}
+
+@media (min-width: 640px) {
+  .page div[class*='language-'] {
+    margin: 28px 0;
+    border-radius: 8px;
+  }
+}
+
+@media (max-width: 639px) {
+  .page li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}
+
+.page div[class*='language-'] + div[class*='language-'],
+.page div[class$='-api'] + div[class*='language-'],
+.page div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+  margin-top: -16px;
+}
+
+.page [class*='language-'] pre,
+.page [class*='language-'] code {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.page [class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 14px 24px;
+  background: transparent;
+  overflow-x: auto;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.page [class*='language-'] code {
+  display: inline-block;
+  padding: 0;
+  line-height: var(--vt-doc-code-line-height);
+  font-size: var(--vt-doc-code-font-size);
+  color: #a6accd;
+  transition: color 0.5s;
+}
+
+.page .highlight-lines {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 13px 0 11px;
+  width: 100%;
+  font-family: var(--vt-font-family-mono);
+  line-height: var(--vt-doc-code-line-height);
+  font-size: var(--vt-doc-code-font-size);
+  user-select: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.page .highlight-lines .highlighted {
+  background-color: rgba(0, 0, 0, 0.3);
+  transition: background-color 0.5s;
+}
+
+.dark .page .highlight-lines .highlighted {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.page div[class*='language-'].line-numbers-mode {
+  padding-left: 32px;
+}
+
+.page .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  border-right: 1px solid var(--vt-c-divider-light);
+  padding: 13px 0 11px;
+  width: 32px;
+  text-align: center;
+  font-family: var(--vt-font-family-mono);
+  line-height: var(--vt-doc-code-line-height);
+  font-size: var(--vt-doc-code-font-size);
+  color: var(--vt-c-text-3);
+  transition: border-color 0.5s, color 0.5s;
+}
+
+.page [class*='language-']:before {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vt-c-text-dark-3);
+  transition: color 0.5s;
+}
+
+@media (max-width: 480px) {
+  .page [class*='language-']:before {
+    top: 1px;
+    right: 5px;
+    font-size: 11px;
+  }
+  .page [class*='language-'] pre {
+    padding: 18px 20px 12px;
+  }
+  .page .highlight-lines {
+    padding-top: 17px;
+  }
+}
+
+.page [class~='language-vue']:before {
+  content: 'vue';
+}
+
+.page [class~='language-html']:before {
+  content: 'html';
+}
+
+.page [class~='language-vue-html']:before {
+  content: 'template';
+}
+
+.page [class~='language-css']:before {
+  content: 'css';
+}
+
+.page [class~='language-js']:before {
+  content: 'js';
+}
+
+.page [class~='language-jsx']:before {
+  content: 'jsx';
+}
+
+.page [class~='language-ts']:before {
+  content: 'ts';
+}
+
+.page [class~='language-tsx']:before {
+  content: 'tsx';
+}
+
+.page [class~='language-json']:before {
+  content: 'json';
+}
+
+.page [class~='language-sh']:before,
+.page [class~='language-bash']:before {
+  content: 'sh';
+}

docs/.vuepress/theme/styles/index.styl

+@import "./custom-block"
+@import "./doc-code"
 .custom-page-class{
 	position: relative;
 	/* 首页几个logo的排版 */

package.json

@@ -24,6 +24,7 @@
   "homepage": "https://github.com/dcloudio/unidoc-zh#readme",
   "devDependencies": {
     "@vuepress/plugin-back-to-top": "^1.9.5",
+    "@vuepress/plugin-shiki": "^2.0.0-beta.5",
     "clipboard": "^2.0.10",
     "fs-extra": "^10.0.0",
     "glob": "^7.1.7",