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" />