fix(docs): 统一文档中的代码示例格式

Author: weilei

docs/components/typewriter.md

@@ -54,7 +54,7 @@
 
 ## 使用示例
 
-```html
+```vue
 <template>
   <div>
     <el-x-typewriter

docs/src/.vuepress/config.js

@@ -64,7 +64,7 @@ module.exports = {
           ],
         },
       ],
-  
+
       "/roadmap/": [
         {
           title: "🎀 开发计划",
@@ -105,14 +105,9 @@ module.exports = {
     },
   },
   markdown: {
-    extendMarkdown: md => {
-      // md.set({ highlight: false }) // 禁用默认高亮
-    }
+
   },
-  // markdown: {
-  //   lineNumbers: true,
-  //   extractHeaders: ["h2", "h3", "h4", "h5", "h6"],
-  // },
+
   plugins: {
     "demo-container": {
       component: "demo-block",
@@ -123,36 +118,5 @@ module.exports = {
       headerAnchorSelector: ".header-anchor",
     },
   },
-  // 	plugins: ['demo-container','@vuepress/active-header-links', {
-  //     sidebarLinkSelector: '.sidebar-link',
-  //     headerAnchorSelector: '.header-anchor'
-  //   }],
-  // plugins: [
-  // 	[
-  // 		'demo-container',
-  // 		{
-  // 			component: 'demo-block',
-  // 			componentName: 'demo-block',
-  // 			className: 'ElementUI-X-demo',
 
-  // 			locales: {
-  // 				'/': {
-  // 					'demo-block': {
-  // 						'hide-text': '隐藏代码',
-  // 						'show-text': '显示代码',
-  // 						'copy-text': '复制代码',
-  // 						'copy-success': '复制成功'
-  // 					}
-  // 				}
-  // 			}
-  // 		}
-  // 	],
-  // 	[
-  // 		'@vuepress/active-header-links',
-  // 		{
-  // 			sidebarLinkSelector: '.sidebar-link',
-  // 			headerAnchorSelector: '.header-anchor',
-  // 		}
-  // 	]
-  // ]
 };

docs/src/.vuepress/styles/index.styl

@@ -85,6 +85,24 @@ $accentColor = #409EFF
 }
 
 // Element UI 文档风格的代码块样式
+.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
+   background:none;
+}
+div[class*=language-] pre,div[class*=language-] pre[class*=language-] code{
+    font-size:12px;
+    color:#000;
+}
+div[class*="language-"]::before {
+    color:$accentColor;
+}
+
+.demo-block .meta {
+   background:none !important;
+}
+.demo-block .demo-block-control .copy-action-success {
+  color: #67c23a !important;
+}
+
 
 
 div,dl,dt,dd,ul,ol,li,tr,td,th,

docs/src/.vuepress/styles/palette.styl

@@ -1,13 +1,7 @@
 // 颜色
 $accentColor = #409EFF                  // 主题色，与 Element UI 默认主题色一致
-$textColor = #2c3e50                    // 文本颜色
-$borderColor = #eaecef                  // 边框颜色
-$codeBgColor = #282c34                  // 代码块背景色
-$arrowBgColor = #ccc                    // 箭头背景色
-$badgeTipColor = #42b983                // 提示徽标背景色
-$badgeWarningColor = #e7c000            // 警告徽标背景色
-$badgeErrorColor = #DA5961              // 错误徽标背景色
-
+$codeBgColor = #fafafa
+$textColor = #333
 // 布局
 $navbarHeight = 3.6rem
 $sidebarWidth = 20rem
@@ -18,3 +12,4 @@ $homePageWidth = 960px
 $MQNarrow = 959px
 $MQMobile = 719px
 $MQMobileNarrow = 419px
+@import '~prismjs/themes/prism.css'

docs/src/components/attachments.md

@@ -18,19 +18,20 @@
 ## 方法
 
 | 方法名 | 说明 | 参数 | 返回值 |
-|--------|------|------|--------|
+| ------ | ---- | ---- | ------ |
 |        |      |      |        |
 
 ## 事件
 
 | 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
+| ------ | ---- | -------- |
 |        |      |          |
 
 ## 使用示例
 
 :::demo
-```html
+
+```vue
 <template>
   <div>
     <!-- 示例代码 -->
@@ -42,12 +43,13 @@ export default {
   data() {
     return {
       // 数据
-    }
+    };
   },
   methods: {
     // 方法
-  }
-}
+  },
+};
 </script>
 ```
+
 :::