diff --git a/docs/zh/components/count-up.md b/docs/zh/components/count-up.md
index 2f7172b2..d88a3ce9 100644
--- a/docs/zh/components/count-up.md
+++ b/docs/zh/components/count-up.md
@@ -15,13 +15,13 @@
 
 ``` vue
 // 基本使用方法
-<CountUp :end="100"></CountUp>
+<d2-count-up :end="100"></d2-count-up>
 
 // 设置始末值
-<CountUp :start="14" :end="100"></CountUp>
+<d2-count-up :start="14" :end="100"></d2-count-up>
 
 // 设置动画时间
-<CountUp :end="100" :decimals="2"></CountUp>
+<d2-count-up :end="100" :decimals="2"></d2-count-up>
 ```
 
 组件会在页面上渲染 `<span>` 标签
diff --git a/docs/zh/components/highlight.md b/docs/zh/components/highlight.md
index e152650d..e68c8de1 100644
--- a/docs/zh/components/highlight.md
+++ b/docs/zh/components/highlight.md
@@ -9,7 +9,7 @@
 ## 示例
 
 ``` vue
-<Highlight code="alert('Hello')"></Highlight>
+<d2-highlight code="alert('Hello')"></d2-highlight>
 ```
 
 ::: tip
diff --git a/src/components/core/CountUp/index.vue b/src/components/core/d2-count-up/index.vue
similarity index 98%
rename from src/components/core/CountUp/index.vue
rename to src/components/core/d2-count-up/index.vue
index 3e312d2f..7a9dc184 100644
--- a/src/components/core/CountUp/index.vue
+++ b/src/components/core/d2-count-up/index.vue
@@ -5,6 +5,7 @@
 <script>
 import CountUp from 'countup.js'
 export default {
+  name: 'd2-count-up',
   props: {
     start: {
       type: Number,
diff --git a/src/components/core/Highlight/index.vue b/src/components/core/d2-highlight/index.vue
similarity index 87%
rename from src/components/core/Highlight/index.vue
rename to src/components/core/d2-highlight/index.vue
index 7e358eaa..6eec67a9 100644
--- a/src/components/core/Highlight/index.vue
+++ b/src/components/core/d2-highlight/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <pre class="high-light-component" v-html="highlightHTML"></pre>
+  <pre class="d2-highlight" v-html="highlightHTML"></pre>
 </template>
 
 <script>
@@ -7,6 +7,7 @@
 // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
 import highlight from 'highlight.js'
 export default {
+  name: 'd2-highlight',
   props: {
     code: {
       type: String,
@@ -36,7 +37,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.high-light-component {
+.d2-highlight {
   margin: 0px;
   border-radius: 4px;
 }
diff --git a/src/components/core/register.js b/src/components/core/register.js
index 179c6e8d..34146edf 100644
--- a/src/components/core/register.js
+++ b/src/components/core/register.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 
 Vue.component('d2-container', resolve => { require(['@/components/core/d2-container'], resolve) })
-Vue.component('CountUp', resolve => { require(['@/components/core/CountUp'], resolve) })
-Vue.component('Highlight', resolve => { require(['@/components/core/Highlight'], resolve) })
+Vue.component('d2-count-up', resolve => { require(['@/components/core/d2-count-up'], resolve) })
+Vue.component('d2-highlight', resolve => { require(['@/components/core/d2-highlight'], resolve) })
 Vue.component('Icon', resolve => { require(['@/components/core/Icon'], resolve) })
 Vue.component('IconSelect', resolve => { require(['@/components/core/IconSelect/index.vue'], resolve) })
 Vue.component('IconSvg', resolve => { require(['@/components/core/IconSvg/index.vue'], resolve) })
diff --git a/src/pages/demo/components/countup/index.vue b/src/pages/demo/components/countup/index.vue
index e04b30e8..5158f5c8 100644
--- a/src/pages/demo/components/countup/index.vue
+++ b/src/pages/demo/components/countup/index.vue
@@ -11,7 +11,7 @@
         <el-card>
           <p slot="title">只设置目标数字</p>
           <div class="group">
-            <CountUp :end="100"></CountUp>  
+            <d2-count-up :end="100"></d2-count-up>  
           </div>
         </el-card>
       </el-col>
@@ -19,7 +19,7 @@
         <el-card>
           <p slot="title">设置起止数值</p>
           <div class="group">
-            <CountUp :start="14" :end="100"></CountUp>
+            <d2-count-up :start="14" :end="100"></d2-count-up>
           </div>
         </el-card>
       </el-col>
@@ -27,7 +27,7 @@
         <el-card>
           <p slot="title">小数位数</p>
           <div class="group">
-            <CountUp :end="100" :decimals="2"></CountUp>
+            <d2-count-up :end="100" :decimals="2"></d2-count-up>
           </div>
         </el-card>
       </el-col>
@@ -35,7 +35,7 @@
         <el-card>
           <p slot="title">动画时长</p>
           <div class="group">
-            <CountUp :end="100" :duration="6"></CountUp>
+            <d2-count-up :end="100" :duration="6"></d2-count-up>
           </div>
         </el-card>
       </el-col>
@@ -43,7 +43,7 @@
         <el-card>
           <p slot="title">回调函数</p>
           <div class="group">
-            <CountUp :end="100" :callback="() => {className = 'end'}" :class="className"></CountUp>
+            <d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"></d2-count-up>
           </div>
         </el-card>
       </el-col>
@@ -51,7 +51,7 @@
         <el-card>
           <p slot="title">结束一秒后更新数值</p>
           <div class="group">
-            <CountUp :end="end" :callback="update"></CountUp>
+            <d2-count-up :end="end" :callback="update"></d2-count-up>
           </div>
         </el-card>
       </el-col>
diff --git a/src/pages/demo/components/editor-quill/index.vue b/src/pages/demo/components/editor-quill/index.vue
index f07590c3..3a8860d2 100644
--- a/src/pages/demo/components/editor-quill/index.vue
+++ b/src/pages/demo/components/editor-quill/index.vue
@@ -16,7 +16,7 @@
     </el-card>
     <el-card>
       <template slot="header">输出</template>
-      <Highlight :code="formated"></Highlight>
+      <d2-highlight :code="formated"></d2-highlight>
     </el-card>
   </d2-container>
 </template>
diff --git a/src/pages/demo/components/highlight/index.vue b/src/pages/demo/components/highlight/index.vue
index 8a7c98cd..354e72a7 100644
--- a/src/pages/demo/components/highlight/index.vue
+++ b/src/pages/demo/components/highlight/index.vue
@@ -8,25 +8,25 @@
     </el-card>
     <el-card class="d2-mb">
       <p slot="title">javascript</p>
-      <Highlight :code="codeJavascript"></Highlight>
+      <d2-highlight :code="codeJavascript"></d2-highlight>
     </el-card>
     <el-row :gutter="20">
       <el-col :span="8">
         <el-card class="d2-mb">
           <p slot="title">css</p>
-          <Highlight :code="codeCSS"></Highlight>
+          <d2-highlight :code="codeCSS"></d2-highlight>
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card class="d2-mb">
           <p slot="title">scss</p>
-          <Highlight :code="codeSCSS"></Highlight>
+          <d2-highlight :code="codeSCSS"></d2-highlight>
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card class="d2-mb">
           <p slot="title">html</p>
-          <Highlight :code="codeHTML"></Highlight>
+          <d2-highlight :code="codeHTML"></d2-highlight>
         </el-card>
       </el-col>
     </el-row>
diff --git a/src/pages/demo/plugins/mock/components/MockDemoCard.vue b/src/pages/demo/plugins/mock/components/MockDemoCard.vue
index 3f64da46..81ffc448 100644
--- a/src/pages/demo/plugins/mock/components/MockDemoCard.vue
+++ b/src/pages/demo/plugins/mock/components/MockDemoCard.vue
@@ -9,12 +9,12 @@
     <el-row :gutter="10">
       <el-col :span="12">
         <div class="col col-l">
-          <Highlight :code="code"></Highlight>
+          <d2-highlight :code="code"></d2-highlight>
         </div>
       </el-col>
       <el-col :span="12">
         <div class="col col-r">
-          <Highlight :code="mock"></Highlight>
+          <d2-highlight :code="mock"></d2-highlight>
         </div>
       </el-col>
     </el-row>
diff --git a/static/md/组件 - 代码高亮.md b/static/md/组件 - 代码高亮.md
index ac4b0a23..0feb72ec 100644
--- a/static/md/组件 - 代码高亮.md	
+++ b/static/md/组件 - 代码高亮.md	
@@ -7,7 +7,7 @@
 ## 示例
 
 ```
-<Highlight code="alert('Hello')"></Highlight>
+<d2-highlight code="alert('Hello')"></d2-highlight>
 ```
 
 > 本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
\ No newline at end of file
diff --git a/static/md/组件 - 数字动画.md b/static/md/组件 - 数字动画.md
index 43ac1c9b..31a3a7d6 100644
--- a/static/md/组件 - 数字动画.md	
+++ b/static/md/组件 - 数字动画.md	
@@ -13,13 +13,13 @@
 
 ```
 // 基本使用方法
-<CountUp :end="100"></CountUp>
+<d2-count-up :end="100"></d2-count-up>
 
 // 设置始末值
-<CountUp :start="14" :end="100"></CountUp>
+<d2-count-up :start="14" :end="100"></d2-count-up>
 
 // 设置动画时间
-<CountUp :end="100" :decimals="2"></CountUp>
+<d2-count-up :end="100" :decimals="2"></d2-count-up>
 ```
 
 组件会在页面上渲染 `<span>` 标签