Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
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)

AltStyle によって変換されたページ (->オリジナル) /