From c086257f1b929fc7bf0867a7a3324ae7d005778f Mon Sep 17 00:00:00 2001
From: zhouhang <alazhouhang@qq.com>
Date: Wed, 6 Mar 2024 00:40:49 +0800
Subject: [PATCH] feat: support local registration & update README

---
 README-zh.md | 81 ++++++++++++++++++++++++++++++++++++++++++--------
 README.md    | 83 ++++++++++++++++++++++++++++++++++++++++++++--------
 src/index.ts |  1 +
 3 files changed, 140 insertions(+), 25 deletions(-)

diff --git a/README-zh.md b/README-zh.md
index c03e814..ad46030 100644
--- a/README-zh.md
+++ b/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,14 +97,31 @@ 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'
@@ -94,10 +129,6 @@ 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 版本迁移
diff --git a/README.md b/README.md
index 9124204..b06a21b 100644
--- a/README.md
+++ b/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,14 +98,31 @@ 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'
@@ -96,10 +130,6 @@ 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
diff --git a/src/index.ts b/src/index.ts
index cf376be..d33aee8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,7 @@ function install(app: any) {
 
 export {
   CodeDiff,
+  hljs,
 }
 
 export default {