mary

Diff

Install

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

<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": "Mary"
    }';
 
@endphp
 
{{-- The `file-name` determines highlight language --}}
<x-diff :old="$old" :new="$new" file-name="extra.json" />
mary
Sponsor