maryUI

Diff

This component is a wrapper around diff2html with a simpler API to quickly show diff between two strings.

Install 

<head>
    ...
 
    {{--  DIFF2HTML  --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
</head>

Examples 

@php
    $old = '{"age": 24, "name": "Mary"}';
 
    $new = '{"age": 27, "name": "Marian"}';
@endphp
 
{{-- The `file-name` determines highlight language --}}
<x-diff :old="$old" :new="$new" file-name="extra.json" />
maryUI
Sponsor