Skip to content

Commit 4d445a4

Browse files
09473ZH09473ZH
committed
feat: format && change highlight && add dark mode
1 parent 7d2931d commit 4d445a4

File tree

7 files changed

+783
-277
lines changed

7 files changed

+783
-277
lines changed

‎README-zh.md

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212

1313
旧版本：
1414

15-
* 0.x 版本, 最新版本 0.3.12 (传统版本，基于 [vue-code-diff](https://github.com/ddchef/vue-code-diff) 进行改进，目前不再进行维护，我们会在
15+
- 0.x 版本, 最新版本 0.3.12 (传统版本，基于 [vue-code-diff](https://github.com/ddchef/vue-code-diff) 进行改进，目前不再进行维护，我们会在
1616
1.x 版本尽量对齐 0.x 版本功能，尽量降低迁移成本)
1717

1818
本项目参考了以下项目，在此对原作者表示感谢！
1919

20-
* [vue-diff](https://github.com/hoiheart/vue-diff)
21-
* [vue-code-diff](https://github.com/ddchef/vue-code-diff)
22-
* Github Code Diff
20+
- [vue-diff](https://github.com/hoiheart/vue-diff)
21+
- [vue-code-diff](https://github.com/ddchef/vue-code-diff)
22+
- Github Code Diff
2323

2424
## 目录
2525

@@ -61,12 +61,10 @@ pnpm add @vue/composition-api
6161
#### 注册为全局组件
6262

6363
```ts
64-
import { createApp } from 'vue'
65-
import CodeDiff from 'v-code-diff'
64+
import { createApp } from "vue";
65+
import CodeDiff from "v-code-diff";
6666

67-
app
68-
.use(CodeDiff)
69-
.mount('#app')
67+
app.use(CodeDiff).mount("#app");
7068
```
7169

7270
然后
@@ -90,10 +88,10 @@ app
9088
#### 注册为全局组件
9189

9290
```ts
93-
import Vue from 'vue'
94-
import CodeDiff from 'v-code-diff'
91+
import Vue from "vue";
92+
import CodeDiff from "v-code-diff";
9593

96-
Vue.use(CodeDiff)
94+
Vue.use(CodeDiff);
9795
```
9896

9997
#### 单独引入
@@ -103,45 +101,47 @@ Vue.use(CodeDiff)
103101
## Demo
104102

105103
| | npm | cdn |
106-
|--------|-----|--------------------------------------------------------------------------------|
104+
| ------ | --- | ------------------------------------------------------------------------------ |
107105
| vue2 | | [vue2-cdn](https://stackblitz.com/edit/v-code-diff-vue2-cdn?file=index.html) |
108106
| vue2.7 | | [vue27-cdn](https://stackblitz.com/edit/v-code-diff-vue27-cdn?file=index.html) |
109107
| vue3 | | [vue3-cdn](https://stackblitz.com/edit/v-code-diff-vue3-cdn?file=index.html) |
110108

111109
## 组件属性
112110

113-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
114-
|----------------|--------------------------------------------------------------------------------------------------------------------|---------|---------------------------|--------------|
115-
| language | 代码语言，如`typescript`，默认纯文本。 [查看全部支持语言](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string | - | plaintext |
116-
| oldString | 旧的字符串 | string | - | - |
117-
| newString | 新的字符串 | string | - | - |
118-
| context | 不同地方上下间隔多少行不隐藏 | number | - | 10 |
119-
| outputFormat | 展示方式 | string | line-by-line，side-by-side | line-by-line |
120-
| diffStyle | 差异风格, 单词级差异或字母级差异 | string | word, char | word |
121-
| trim | 移除字符串前后空白字符 | boolean | - | false |
122-
| noDiffLineFeed | 不 diff windows 换行符(CRLF)与 linux 换行符(LF) | boolean | - | false |
123-
| maxHeight | 组件最大高度，例如 300px | number | - | undefined |
124-
| filename | 文件名 | string | - | undefined |
111+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
112+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------------- | ------------ |
113+
| language | 代码语言，如`typescript`，默认纯文本。 [查看全部支持语言](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string | - | plaintext |
114+
| oldString | 旧的字符串 | string | - | - |
115+
| newString | 新的字符串 | string | - | - |
116+
| context | 不同地方上下间隔多少行不隐藏 | number | - | 10 |
117+
| outputFormat | 展示方式 | string | line-by-line，side-by-side | line-by-line |
118+
| diffStyle | 差异风格, 单词级差异或字母级差异 | string | word, char | word |
119+
| trim | 移除字符串前后空白字符 | boolean | - | false |
120+
| noDiffLineFeed | 不 diff windows 换行符(CRLF)与 linux 换行符(LF) | boolean | - | false |
121+
| maxHeight | 组件最大高度，例如 300px | number | - | undefined |
122+
| filename | 文件名 | string | - | undefined |
123+
| newFilename | 新文件文件名 | string | - | undefined |
124+
| theme | 用于切换日间模式/夜间模式 | ThemeType | light , dark | 'light' |
125125

126126
## 组件事件
127-
| Name | Description | Type |
128-
|------|-------------|---------------------------------------------------------------------------------|
129-
| diff | diff 完成后触发 | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
130127

128+
| Name | Description | Type |
129+
| ---- | --------------- | ------------------------------------------------------------------------------- |
130+
| diff | diff 完成后触发 | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
131131

132132
## 拓展高亮语言
133133

134134
为了减小打包后的体积，系统默认仅支持以下常用语言
135135

136-
* plaintext
137-
* xml/html
138-
* javascript
139-
* json
140-
* yaml
141-
* python
142-
* java
143-
* bash
144-
* sql
136+
- plaintext
137+
- xml/html
138+
- javascript
139+
- json
140+
- yaml
141+
- python
142+
- java
143+
- bash
144+
- sql
145145

146146
如果您需要的语言不在其中，可以手动引入相关的语言高亮模块
147147

@@ -150,11 +150,11 @@ pnpm add highlight.js
150150
```
151151

152152
```typescript
153-
import CodeDiff from 'v-code-diff';
153+
import CodeDiff from "v-code-diff";
154154
// Extend C language
155-
import c from 'highlight.js/lib/languages/c';
155+
import c from "highlight.js/lib/languages/c";
156156

157-
CodeDiff.hljs.registerLanguage('c', c);
157+
CodeDiff.hljs.registerLanguage("c", c);
158158
```
159159

160160
## 从 0.x 版本迁移
@@ -163,39 +163,43 @@ v-code-diff 的 1.x 版本相较于 0.x 版本，具有打包体积减小、性
163163

164164
重点：
165165

166-
* 1.x 版本中，不再会自动识别语言并高亮，您需要手动指定语言类型，如 `language="python"`，若不指定则默认为纯文本`plaintext`
166+
- 1.x 版本中，不再会自动识别语言并高亮，您需要手动指定语言类型，如 `language="python"`，若不指定则默认为纯文本`plaintext`
167167
，不会进行高亮。
168-
* 1.x 版本中，由于渲染和高亮是同时进行，因此移除了组件事件
169-
* 1.x 版本中，以下组件属性(Prop)有变动
170-
* highlight - 移除
171-
* drawFileList - 移除
172-
* fileName - 更名为 filename
168+
- 1.x 版本中，由于渲染和高亮是同时进行，因此移除了组件事件
169+
- 1.x 版本中，以下组件属性(Prop)有变动
170+
- highlight - 移除
171+
- drawFileList - 移除
172+
- fileName - 更名为 filename
173+
- newFilename - 新增
174+
- theme - 新增
173175

174176
以下是两个版本具体的差异点，您可以参照阅读完成迁移。
175177

176178
### 组件事件对比
177179

178180
1.x 版本中，由于渲染与高亮是同时进行，因此不再提供组件事件
179181

180-
| 事件名称 | 说明 |
181-
|---------------|------|
182+
| 事件名称 | 说明 |
183+
| ------------- | -------- |
182184
| before-render | 不再提供 |
183185
| after-render | 不再提供 |
184186

185187
### 组件属性对比
186188

187-
| 参数 | 含义 | 变更情况 |
188-
|------------------------|-------------------|--------------------|
189-
| highlight | 控制是否高亮代码 | 1.x 版本移除 |
190-
| language | 代码语言 | 无 |
191-
| old-string | 旧的字符串 | 无 |
192-
| new-string | 新的字符串 | 无 |
193-
| context | 不同地方上下间隔多少行不隐藏 | 无 |
194-
| output-format | 展示方式 | 无 |
195-
| diff-style | 差异风格, 单词级差异或字母级差异 | 无 |
196-
| drawFileList | 展示对比文件列表 | 1.x 版本移除 |
197-
| renderNothingWhenEmpty | 当无对比时不渲染 | 1.x 版本移除 |
198-
| fileName | 文件名 | 1.x 版本更名为 filename |
199-
| isShowNoChange | 当无对比时展示源代码 | 1.x 变为默认情况，故移除 |
200-
| trim | 移除字符串前后空白字符 | 无 |
201-
| noDiffLineFeed | 忽视不同系统换行符差异 | 无 |
189+
| 参数 | 含义 | 变更情况 |
190+
| ---------------------- | -------------------------------- | ------------------------ |
191+
| highlight | 控制是否高亮代码 | 1.x 版本移除 |
192+
| language | 代码语言 | 无 |
193+
| old-string | 旧的字符串 | 无 |
194+
| new-string | 新的字符串 | 无 |
195+
| context | 不同地方上下间隔多少行不隐藏 | 无 |
196+
| output-format | 展示方式 | 无 |
197+
| diff-style | 差异风格, 单词级差异或字母级差异 | 无 |
198+
| drawFileList | 展示对比文件列表 | 1.x 版本移除 |
199+
| renderNothingWhenEmpty | 当无对比时不渲染 | 1.x 版本移除 |
200+
| fileName | 文件名 | 1.x 版本更名为 filename |
201+
| newFilename | 新文件文件名 | 1.x 版本新增 |
202+
| isShowNoChange | 当无对比时展示源代码 | 1.x 变为默认情况，故移除 |
203+
| trim | 移除字符串前后空白字符 | 无 |
204+
| noDiffLineFeed | 忽视不同系统换行符差异 | 无 |
205+
| theme | 用于切换日间模式/夜间模式 | 1.x 版本新增 |

0 commit comments

Comments
 (0)