Skip to content

Commit

Permalink
feat: format && change highlight && add dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@09473ZH
09473ZH committed Nov 19, 2023
1 parent 7d2931d commit 4d445a4
Show file tree
Hide file tree
Showing 7 changed files with 783 additions and 277 deletions.
130 changes: 67 additions & 63 deletions README-zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@

旧版本：

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

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

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

## 目录

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

```ts
import { createApp } from 'vue'
import CodeDiff from 'v-code-diff'
import { createApp } from "vue";
import CodeDiff from "v-code-diff";

app
.use(CodeDiff)
.mount('#app')
app.use(CodeDiff).mount("#app");
```

然后
Expand All @@ -90,10 +88,10 @@ app
#### 注册为全局组件

```ts
import Vue from 'vue'
import CodeDiff from 'v-code-diff'
import Vue from "vue";
import CodeDiff from "v-code-diff";

Vue.use(CodeDiff)
Vue.use(CodeDiff);
```

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

| | npm | cdn |
|--------|-----|--------------------------------------------------------------------------------|
| ------ | --- | ------------------------------------------------------------------------------ |
| vue2 | | [vue2-cdn](https://stackblitz.com/edit/v-code-diff-vue2-cdn?file=index.html) |
| vue2.7 | | [vue27-cdn](https://stackblitz.com/edit/v-code-diff-vue27-cdn?file=index.html) |
| vue3 | | [vue3-cdn](https://stackblitz.com/edit/v-code-diff-vue3-cdn?file=index.html) |

## 组件属性

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

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

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

## 拓展高亮语言

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

* plaintext
* xml/html
* javascript
* json
* yaml
* python
* java
* bash
* sql
- plaintext
- xml/html
- javascript
- json
- yaml
- python
- java
- bash
- sql

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

Expand All @@ -150,11 +150,11 @@ pnpm add highlight.js
```

```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 版本迁移
Expand All @@ -163,39 +163,43 @@ v-code-diff 的 1.x 版本相较于 0.x 版本，具有打包体积减小、性

重点：

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

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

### 组件事件对比

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

| 事件名称 | 说明 |
|---------------|------|
| 事件名称 | 说明 |
| ------------- | -------- |
| before-render | 不再提供 |
| after-render | 不再提供 |

### 组件属性对比

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

0 comments on commit 4d445a4

Please sign in to comment.