feat: support local registration & update README

Author: 09473ZH

README-zh.md

@@ -58,6 +58,24 @@ pnpm add @vue/composition-api
 
 ### Vue3
 
+#### 单独引入
+> 推荐使用，因为对 tree-shaking 有更好的支持。
+```vue
+<script setup>
+import { CodeDiff } from 'v-code-diff'
+</script>
+
+<template>
+  <div>
+    <CodeDiff
+      old-string="12345"
+      new-string="3456"
+      output-format="side-by-side"
+    />
+  </div>
+</template>
+```
+
 #### 注册为全局组件
 
 ```ts
@@ -79,25 +97,38 @@ app.use(CodeDiff).mount('#app')
 </template>
 ```
 
-#### 单独引入
-
-不推荐，但保留相关能力，方便 0.x 用户迁移
-
 ### Vue2
 
-#### 注册为全局组件
+#### 单独引入
+> 推荐使用，因为对 tree-shaking 有更好的支持。
+```vue
+<script>
+import { CodeDiff } from 'v-code-diff'
+export default {
+  components: {
+    CodeDiff
+  }
+}
+</script>
 
+<template>
+  <div>
+    <CodeDiff
+      old-string="12345"
+      new-string="3456"
+      output-format="side-by-side"
+    />
+  </div>
+</template>
+```
+#### 注册为全局组件
 ```ts
 import Vue from 'vue'
 import CodeDiff from 'v-code-diff'
 
 Vue.use(CodeDiff)
 ```
 
-#### 单独引入
-
-不推荐，但保留相关能力，方便 0.x 用户迁移
-
 ## Demo
 
 |        | npm | cdn                                                                            |
@@ -157,13 +188,39 @@ Vue.use(CodeDiff)
 ```shell
 pnpm add highlight.js
 ```
+#### 单独引入
+> 推荐使用，因为对 tree-shaking 有更好的支持。
+```vue
+<script>
+import { CodeDiff, hljs } from 'v-code-diff'
+import c from 'highlight.js/lib/languages/c'
+// Extend C language
+hljs.registerLanguage('c', c)
+export default {
+  components: {
+    CodeDiff,
+  }
+}
+</script>
 
+<template>
+  <div>
+    <CodeDiff
+      old-string="#include <stdio.h>"
+      new-string="#include <stdio.h>\nint a = 1;"
+      output-format="side-by-side"
+      language="c"
+    />
+  </div>
+</template>
+```
+#### 全局注册
 ```typescript
-import CodeDiff from "v-code-diff";
+import CodeDiff from "v-code-diff"
 // Extend C language
-import c from "highlight.js/lib/languages/c";
+import c from "highlight.js/lib/languages/c"
 
-CodeDiff.hljs.registerLanguage("c", c);
+CodeDiff.hljs.registerLanguage("c", c)
 ```
 
 ## 从 0.x 版本迁移

README.md

@@ -22,7 +22,6 @@ This project references the following projects, and I would like to express my g
 - Github Code Diff
 
 ## Contents
-
 - [Install](#Install)
 - [Getting started](#Getting-started)
   - [Vue3](#Vue3)
@@ -58,6 +57,24 @@ pnpm add @vue/composition-api
 
 ### Vue3
 
+#### Register locally
+> Recommend using local registration for better tree-shaking support.
+```vue
+<script setup>
+import { CodeDiff } from 'v-code-diff'
+</script>
+
+<template>
+  <div>
+    <CodeDiff
+      old-string="12345"
+      new-string="3456"
+      output-format="side-by-side"
+    />
+  </div>
+</template>
+```
+
 #### Register globally
 
 ```ts
@@ -81,25 +98,38 @@ then
 </template>
 ```
 
-#### Register locally
-
-Not recommended, but the relevant capabilities are retained to facilitate migration for 0.x users.
-
 ### Vue2
 
-#### Register globally
+#### Register locally
+> > Recommend using local registration for better tree-shaking support.
+```vue
+<script>
+import { CodeDiff } from 'v-code-diff'
+export default {
+  components: {
+    CodeDiff
+  }
+}
+</script>
 
+<template>
+  <div>
+    <CodeDiff
+      old-string="12345"
+      new-string="3456"
+      output-format="side-by-side"
+    />
+  </div>
+</template>
+```
+#### Register globally
 ```ts
 import Vue from 'vue'
 import CodeDiff from 'v-code-diff'
 
 Vue.use(CodeDiff)
 ```
 
-#### Register locally
-
-Not recommended, but the relevant capabilities are retained to facilitate migration for 0.x users.
-
 ## Demo
 
 |        | npm | cdn                                                                            |
@@ -160,13 +190,40 @@ If the language you need is not included, you can manually import the relevant l
 ```shell
 pnpm add highlight.js
 ```
+#### Register locally
+> Recommend using local registration for better tree-shaking support.
+```vue
+<script>
+import { CodeDiff, hljs } from 'v-code-diff'
+import c from 'highlight.js/lib/languages/c'
+// Extend C language
+hljs.registerLanguage('c', c)
+export default {
+  components: {
+    CodeDiff,
+  }
+}
+</script>
 
+<template>
+  <div>
+    <CodeDiff
+      old-string="#include <stdio.h>"
+      new-string="#include <stdio.h>\nint a = 1;"
+      output-format="side-by-side"
+      language="c"
+    />
+  </div>
+</template>
+```
+
+#### Register globally
 ```typescript
-import CodeDiff from 'v-code-diff';
+import CodeDiff from 'v-code-diff'
 // Extend C language
-import c from 'highlight.js/lib/languages/c';
+import c from 'highlight.js/lib/languages/c'
 
-CodeDiff.hljs.registerLanguage('c', c);
+CodeDiff.hljs.registerLanguage('c', c)
 ```
 
 ## Migrate from 0.x version

src/index.ts

@@ -7,6 +7,7 @@ function install(app: any) {
 
 export {
   CodeDiff,
+  hljs,
 }
 
 export default {