docs: update README

imguolao · Sep 12, 2024 · 7c5d06b · 7c5d06b
1 parent c92f3d1
commit 7c5d06b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Use `monaco-editor` loaded from CDN in Vue 2&3, no need to bundling.
 
-[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor)
+[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) [![npm downloads](https://img.shields.io/npm/dm/%40guolao%2Fvue-monaco-editor)](https://www.npmjs.com/package/@guolao/vue-monaco-editor)
 
 English | [简体中文](https://github.com/imguolao/monaco-vue/blob/main/README.zh-CN.md)
 
@@ -12,7 +12,7 @@ The `monaco-editor` doesn't support ESM very well, which results in large files
 
 But the official team has written a loader to lazy load files of the editor remotely, so we can load the files from a CDN to use it.
 
-If you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool.See [here](#npm-package).
+If you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool. See [here](#npm-package).
 
 ## Installation
 
@@ -39,7 +39,7 @@ Of course, you can also use [unpkg](https://unpkg.com/@guolao/vue-monaco-editor/
 
 ## Usage
 
-Register the component.
+**Global Registration**
 
 ```ts
 import { createApp } from 'vue'
@@ -52,8 +52,11 @@ app.use(VueMonacoEditorPlugin, {
     vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs'
   },
 })
+```
+
+**Local Registration**
 
-// You can also:
+```ts
 // main.ts
 import { loader } from '@guolao/vue-monaco-editor'
 loader.config({

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -2,7 +2,7 @@
 
 在 `Vue 2&3` 中使用从 CDN 远程加载的 `monaco-editor`，不需要打包。
 
-[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor)
+[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) [![npm downloads](https://img.shields.io/npm/dm/%40guolao%2Fvue-monaco-editor)](https://www.npmjs.com/package/@guolao/vue-monaco-editor)
 
 简体中文 | [English](https://github.com/imguolao/monaco-vue/blob/main/README.md)
 
@@ -52,8 +52,11 @@ app.use(VueMonacoEditorPlugin, {
     vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs'
   },
 })
+```
+
+不全局注册组件
 
-// 也可以不全局注册组件
+```ts
 // main.ts
 import { loader } from '@guolao/vue-monaco-editor'
 loader.config({

diff --git a/packages/editor/README.md b/packages/editor/README.md
@@ -2,7 +2,7 @@
 
 Use `monaco-editor` loaded from CDN in Vue 2&3, no need to bundling.
 
-[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor)
+[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) [![npm downloads](https://img.shields.io/npm/dm/%40guolao%2Fvue-monaco-editor)](https://www.npmjs.com/package/@guolao/vue-monaco-editor)
 
 English | [简体中文](https://github.com/imguolao/monaco-vue/blob/main/README.zh-CN.md)
 
@@ -12,7 +12,7 @@ The `monaco-editor` doesn't support ESM very well, which results in large files
 
 But the official team has written a loader to lazy load files of the editor remotely, so we can load the files from a CDN to use it.
 
-If you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool.See [here](#npm-package).
+If you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool. See [here](#npm-package).
 
 ## Installation
 
@@ -39,7 +39,7 @@ Of course, you can also use [unpkg](https://unpkg.com/@guolao/vue-monaco-editor/
 
 ## Usage
 
-Register the component.
+**Global Registration**
 
 ```ts
 import { createApp } from 'vue'
@@ -52,8 +52,11 @@ app.use(VueMonacoEditorPlugin, {
     vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs'
   },
 })
+```
+
+**Local Registration**
 
-// You can also:
+```ts
 // main.ts
 import { loader } from '@guolao/vue-monaco-editor'
 loader.config({