Code Diff Plugin For Vue 3/2

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:

Code Diff Plugin

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

Add Comment