vue-diff - GitLite

KO | EN

gitlite — search

#javascript #go #android #deep-learning #nodejs #java #awesome #cli #awesome-list #security #pytorch #ios #openai #open-source

vue-diff

(★ 205)

VueJS diff viewer plugin

파일 탐색기

최종 버전 다운로드 (.zip)

- - release.yaml
  - test.yaml
- index.spec.ts
- utils.spec.ts
- App.vue
- jquery-3.5.0.js
- jquery-3.6.0.js
- main.ts
- shims-vue.d.ts
- template.ts
- Code.vue.d.ts
- Diff.vue.d.ts
- env.d.ts
- highlight.d.ts
- hooks.d.ts
- index.css
- index.d.ts
- index.es.js
- index.umd.js
- Line.vue.d.ts
- types.d.ts
- utils.d.ts
- Code.vue
- Diff.vue
- env.d.ts
- highlight.ts
- hooks.ts
- index.ts
- Line.vue
- style.scss
- types.ts
- utils.ts
.browserslistrc
.eslintrc.js
.gitignore
.npmignore
.prettierrc
index.html
LICENSE
package.json
README.md
tsconfig.json
tsconfig.node.json
vite.config.docs.ts
vite.config.ts
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/hoiheart/vue-diff

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd vue-diff

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install vue-diff

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm install highlight.js

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-diff

Vue diff viewer plugin for Vue@3  
<a href="https://hoiheart.github.io/vue-diff/index.html" target="_blank">demo</a>

## Table of Contents

- [Table of Contents](#table-of-contents)
- [Introduction](#introduction)
- [Features](#features)
- [Install plugin](#install-plugin)
  - [Options](#options)
- [Usage diff viewer](#usage-diff-viewer)
  - [Settings with default props](#settings-with-default-props)
  - [Settings with full props](#settings-with-full-props)
  - [Props](#props)
- [Custom theme](#custom-theme)
- [Extend languages](#extend-languages)
  - [Default supported languages and values](#default-supported-languages-and-values)
- [Virtual scroll](#virtual-scroll)
  - [Object props](#object-props)

## Introduction

<img src="https://user-images.githubusercontent.com/25652218/104784360-7520e600-57cb-11eb-8abc-ce81dd309e05.png" alt="screenshot" style="max-width:100%;">

You can see the difference between the two codes with the `vue-diff` plugin.  
This plugin dependent on <a href="https://github.com/JackuB/diff-match-patch">diff-match-patch</a> and <a href="https://github.com/highlightjs/highlight.js/">highlight.js</a>, shows similar results to other diff viewers (e.g., Github Desktop).  
Here is the <a href="https://hoiheart.github.io/vue-diff/index.html" target="_blank" style="font-size: 1.2em; text-decoration: underline;">demo</a>

## Features

- Support split / unified mode
- Support multiple languages and can be extended
- Support two themes (dark / light) and can be customized
- Virtual scroll for large text comparison
- Folding view (_Partial folding is not supported_)
- Support typescript

## Install plugin

```bash
npm install vue-diff
```

And install plugin in vue application

```ts
import VueDiff from 'vue-diff';

import 'vue-diff/dist/index.css';

app.use(VueDiff);
```

### Options

```ts
app.use(VueDiff, {
  componentName: 'VueDiff',
});
```

| name          | type     | detault | description                |
| ------------- | -------- | ------- | -------------------------- |
| componentName | `string` | `Diff`  | Global diff component name |

## Usage diff viewer

Insert the diff component with props.

### Settings with default props

```vue
<template>
  
  <Diff
    :mode="mode"
    :theme="theme"
    :language="language"
    :prev="prev"
    :current="current"
  />
</template>
```

### Settings with full props

```vue
<template>
  <Diff
    :mode="mode"
    :theme="theme"
    :language="language"
    :prev="prev"
    :current="current"
    :folding="folding"
    :input-delay="0"
    :virtual-scroll="{ height: 500, lineMinHeight: 24, delay: 100 }"
  />
</template>
```

### Props

| name          | type              | detault     | values                             | description                                                                                                                                 |
| ------------- | ----------------- | ----------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| mode          | `string`          | `split`     | `split`, `unified`                 |
| theme         | `string`          | `dark`      | `dark`, `light`, `custom${string}` | See <a href="#custom-theme">Custom theme</a>                                                                                                |
| language      | `string`          | `plaintext` |                                    | See <a href="#extend-languages">Extend languages</a>                                                                                        |
| prev          | `string`          | `''`        |                                    | Prev code                                                                                                                                   |
| current       | `string`          | `''`        |                                    | Current Code                                                                                                                                |
| folding       | `boolean`         | `false`     |                                    | Folding not different                                                                                                                       |
| inputDelay    | `number`          | `0`         |                                    | Setting up rendering debounce for changes for performance benefit (mode, prev, curr)                                                        |
| 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> |

## Custom theme

`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.

- dark: `highlight.js/scss/monokai.scss`
- light: `highlight.js/scss/vs.scss`

```bash
npm install highlight.js
```

```vue
<template>
  <Diff
    :mode="mode"
    
    theme="custom"
    :language="language"
    :prev="prev"
    :current="current"
  />
</template>

<style lang="scss">
.vue-diff-theme-custom {
  @import 'highlight.js/scss/vs2015.scss'; // import theme

background-color: #000; // Set background color
}
</style>
```

## Extend languages

`vue-diff` supports the following languages and can be extended through <a href="https://github.com/highlightjs/highlight.js/#es6-modules">highlight.js language registration.</a>

### Default supported languages and values

- `css`
- `xml`: `xml`, `html`, `xhtml`, `rss`, `atom`, `xjb`, `xsd`, `xsl`, `plist`, `svg`
- `markdown`: `markdown`, `md`, `mkdown`, `mkd`
- `javascript`: `javascript`, `js`, `jsx`
- `json`
- `plaintext`: `plaintext`, `txt`, `text`
- `typescript`: `typescript`, `ts`

```bash
npm install highlight.js
```

```ts
import VueDiff from 'vue-diff';
import 'vue-diff/dist/index.css';

// extend yaml language
import yaml from 'highlight.js/lib/languages/yaml';

VueDiff.hljs.registerLanguage('yaml', yaml);

app.use(VueDiff);
```

> <a href="https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md">Check supported languages of Highlight.js</a>

## Virtual scroll

Comparing text from many lines can slow down performance.<br>
With virtualScroll props, virtualScroll applies. (Self-made for this plug-in.)

#### Object property value

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

- height (`number`): Diff box height (Applies only to px values)
- lineMinHeight (`number`): minimum height of line
  > 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.
- delay (`number`): re-rendering delay when scrolling or resizing
  > 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.