Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

Commit 4eaa9bd

Browse files
committed
docs: Change docs
1 parent 8332485 commit 4eaa9bd

File tree

1 file changed

+59
-57
lines changed

1 file changed

+59
-57
lines changed

README.md

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,22 @@
33
Vue diff viewer plugin for Vue@3
44
<a href="https://hoiheart.github.io/vue-diff/demo/index.html" target="_blank">demo</a>
55

6-
> ⚠️ This plugin does not support Vue2
7-
86
## Table of Contents
97

10-
* [Table of Contents](#table-of-contents)
11-
* [Introduction](#introduction)
12-
* [Features](#features)
13-
* [Install plugin](#install-plugin)
14-
+ [Options](#options)
15-
* [Usage diff viewer](#usage-diff-viewer)
16-
+ [Settings with default props](#settings-with-default-props)
17-
+ [Settings with full props](#settings-with-full-props)
18-
+ [Props](#props)
19-
* [Custom theme](#custom-theme)
20-
* [Extend languages](#extend-languages)
21-
+ [Default supported languages and values](#default-supported-languages-and-values)
22-
* [Virtual scroll](#virtual-scroll)
23-
- [Object props](#object-props)
8+
- [Table of Contents](#table-of-contents)
9+
- [Introduction](#introduction)
10+
- [Features](#features)
11+
- [Install plugin](#install-plugin)
12+
- [Options](#options)
13+
- [Usage diff viewer](#usage-diff-viewer)
14+
- [Settings with default props](#settings-with-default-props)
15+
- [Settings with full props](#settings-with-full-props)
16+
- [Props](#props)
17+
- [Custom theme](#custom-theme)
18+
- [Extend languages](#extend-languages)
19+
- [Default supported languages and values](#default-supported-languages-and-values)
20+
- [Virtual scroll](#virtual-scroll)
21+
- [Object props](#object-props)
2422

2523
## Introduction
2624

@@ -32,11 +30,12 @@ Here is the <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target
3230

3331
## Features
3432

35-
* Support split / unified mode
36-
* Support multiple languages and can be extended
37-
* Support two themes (dark / light) and can be customized
38-
* Virtual scroll for large text comparison
39-
* Folding view (*Partial folding is not supported*)
33+
- Support split / unified mode
34+
- Support multiple languages and can be extended
35+
- Support two themes (dark / light) and can be customized
36+
- Virtual scroll for large text comparison
37+
- Folding view (_Partial folding is not supported_)
38+
- Support typescript
4039

4140
## Install plugin
4241

@@ -47,28 +46,31 @@ npm install vue-diff
4746
And install plugin in vue application
4847

4948
```ts
50-
import VueDiff from 'vue-diff'
49+
import VueDiff from 'vue-diff';
5150

52-
import 'vue-diff/dist/index.css'
51+
import 'vue-diff/dist/index.css';
5352

54-
app.use(VueDiff)
53+
app.use(VueDiff);
5554
```
55+
5656
### Options
5757

5858
```ts
5959
app.use(VueDiff, {
60-
componentName: 'VueDiff'
61-
})
60+
componentName: 'VueDiff',
61+
});
6262
```
6363

64-
| name | type | detault | description |
65-
|- | - | - | - |
66-
| componentName | `string` | `Diff` | Global diff component name |
64+
| name | type | detault | description |
65+
| ------------- | -------- | ------- | -------------------------- |
66+
| componentName | `string` | `Diff` | Global diff component name |
6767

6868
## Usage diff viewer
6969

7070
Insert the diff component with props.
71+
7172
### Settings with default props
73+
7274
```vue
7375
<template>
7476
<!-- If the changed componentName
@@ -103,23 +105,23 @@ Insert the diff component with props.
103105

104106
### Props
105107

106-
| name | type | detault | values | description
107-
|- | - | - | - |- |
108-
| mode | `string` | `split` | `split`, `unified` |
109-
| theme | `string` | `dark` | `dark`, `light` | See <a href="#custom-theme">Custom theme</a>
110-
| language | `string` | `plaintext` | | See <a href="#extend-languages">Extend languages</a>
111-
| prev | `string` | `''` | | Prev code |
112-
| current | `string` | `''` | | Current Code |
113-
| folding | `boolean` | `false` | | Folding not different |
114-
| inputDelay | `number` | `0` | | Setting up rendering debounce for changes for performance benefit (mode, prev, curr) |
115-
| virtualScroll | `boolean\|object` | `false` | | *Default value when setting true :*<br>`{ height: 500, lineMinHeight: 24, delay: 100 }`<br>See <a href="#virtual-scroll">virtual scroll</a> |
108+
| name | type | detault | values | description |
109+
| ------------- | ----------------- | ----------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
110+
| mode | `string` | `split` | `split`, `unified` |
111+
| theme | `string` | `dark` | `dark`, `light` | See <a href="#custom-theme">Custom theme</a> |
112+
| language | `string` | `plaintext` | | See <a href="#extend-languages">Extend languages</a> |
113+
| prev | `string` | `''` | | Prev code |
114+
| current | `string` | `''` | | Current Code |
115+
| folding | `boolean` | `false` | | Folding not different |
116+
| inputDelay | `number` | `0` | | Setting up rendering debounce for changes for performance benefit (mode, prev, curr) |
117+
| virtualScroll | `boolean\|object` | `false` | | _Default value when setting true :_<br>`{ height: 500, lineMinHeight: 24, delay: 100 }`<br>See <a href="#virtual-scroll">virtual scroll</a> |
116118

117119
## Custom theme
118120

119121
`vue-diff` uses the following <a href="https://github.com/highlightjs/highlight.js/tree/master/src/styles">highlight.js themes</a> and can be customized.
120122

121-
* dark: `highlight.js/scss/monokai.scss`
122-
* light: `highlight.js/scss/vs.scss`
123+
- dark: `highlight.js/scss/monokai.scss`
124+
- light: `highlight.js/scss/vs.scss`
123125

124126
```bash
125127
npm install highlight.js
@@ -151,28 +153,28 @@ npm install highlight.js
151153

152154
### Default supported languages and values
153155

154-
* `css`
155-
* `xml`: `xml`, `html`, `xhtml`, `rss`, `atom`, `xjb`, `xsd`, `xsl`, `plist`, `svg`
156-
* `markdown`: `markdown`, `md`, `mkdown`, `mkd`
157-
* `javascript`: `javascript`, `js`, `jsx`
158-
* `json`
159-
* `plaintext`: `plaintext`, `txt`, `text`
160-
* `typescript`: `typescript`, `ts`
156+
- `css`
157+
- `xml`: `xml`, `html`, `xhtml`, `rss`, `atom`, `xjb`, `xsd`, `xsl`, `plist`, `svg`
158+
- `markdown`: `markdown`, `md`, `mkdown`, `mkd`
159+
- `javascript`: `javascript`, `js`, `jsx`
160+
- `json`
161+
- `plaintext`: `plaintext`, `txt`, `text`
162+
- `typescript`: `typescript`, `ts`
161163

162164
```bash
163165
npm install highlight.js
164166
```
165167

166168
```ts
167-
import VueDiff from 'vue-diff'
168-
import 'vue-diff/dist/index.css'
169+
import VueDiff from 'vue-diff';
170+
import 'vue-diff/dist/index.css';
169171

170172
// extend yaml language
171-
import yaml from 'highlight.js/lib/languages/yaml'
173+
import yaml from 'highlight.js/lib/languages/yaml';
172174

173-
VueDiff.hljs.registerLanguage('yaml', yaml)
175+
VueDiff.hljs.registerLanguage('yaml', yaml);
174176

175-
app.use(VueDiff)
177+
app.use(VueDiff);
176178
```
177179

178180
> <a href="https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md">Check supported languages of Highlight.js</a>
@@ -186,8 +188,8 @@ With virtualScroll props, virtualScroll applies. (Self-made for this plug-in.)
186188

187189
When using virtual scroll, the css of all code lines is changed to the absolute position, which requires detailed settings.
188190

189-
* height (`number`): Diff box height (Applies only to px values)
190-
* lineMinHeight (`number`): minimum height of line
191+
- height (`number`): Diff box height (Applies only to px values)
192+
- lineMinHeight (`number`): minimum height of line
191193
> Minimum height value of line is required for visible area calculation.<br>The default is 24, but you can set it yourself if you need to adjust it according to the page's front-size, line-height, etc.
192-
* delay (`number`): re-rendering delay when scrolling or resizing
193-
> Performance problems occur when too often a re-rendering function is invoked based on scrolling or resizing<br>This setting applies a delay using throttle.
194+
- delay (`number`): re-rendering delay when scrolling or resizing
195+
> Performance problems occur when too often a re-rendering function is invoked based on scrolling or resizing<br>This setting applies a delay using throttle.

0 commit comments

Comments
 (0)