A Vue 3/2 code diff plugin for developers. Based on highlight.js.
Features:
- line-by-line or side-by-side output format.
- highlights the differences between strings by characters or words.
- line numbers
How to use it:
1. Import the Code Diff Plugin.
import {createApp} from 'vue'
import CodeDiff from 'v-code-diff'
2. Register the plugin.
app
.use(CodeDiff)
.mount('#app')
3. Add the code diff component to the template and define the old/new strings as follows:
<template>
<code-diff
:old-string="'vuescript'"
:new-string="'JavaScript'"
output-format="side-by-side"/>
</template>
4. Available component props.
language: 'plaintext', // highlight.js languages context: 10, diffStyle: 'word', // or 'char' outputFormat: 'line-by-line', // or 'side-by-side' trim: false, noDiffLineFeed: false, maxHeight: undefined,
Preview:
Changelog:
v1.4.0 (05/26/2023)
- Expanding folded lines
v1.4.0 (04/27/2023)
- Add support for CDN
v1.3.2 (04/24/2023)
- Bugfix
- Add missing box-sizing CSS property
v1.3.1 (03/27/2023)
- Bugfix
v1.3.0 (02/22/2023)
- Optimize rendering performance for large text
v1.2.0 (02/20/2023)
- Change color of folding line to blue
- Support prop filename
- Bugfix
02/13/2023
- v1.1.0: Add maxHeight prop and adjust css
04/27/2022
- v0.3.12: update
04/27/2022
- v0.3.11: feat: add prop syncScroll
02/21/2022
- v0.3.9: update
11/21/2021
- v0.3.6: update
11/14/2021
- v0.3.4: support sync scroll when outputFormat is side-by-side
09/11/2021
- v0.3.4: feat: add prop trim
Download Details:
Author: Shimada666
Live Demo: https://shimada666.github.io/v-code-diff/
Download Link: https://github.com/Shimada666/v-code-diff/archive/refs/heads/master.zip
Official Website: https://github.com/Shimada666/v-code-diff
Install & Download:
# Yarn
$ yarn add v-code-diff
# NPM
$ npm i v-code-diff --save