shaf-unified-diff

Custom element to view unified diff

Usage no npm install needed!

<script type="module">
  import shafUnifiedDiff from 'https://cdn.skypack.dev/shaf-unified-diff';
</script>

README

It's easy peasy

<!-- Custom Elements v1 polyfill (2.7KB gzipped) -->
<script src="https://unpkg.com/@webcomponents/custom-elements@1.0.0-alpha.3"></script>

<!-- our custom element's source (3.4KB gzipped) -->
<script src="https://unpkg.com/shaf-unified-diff@1.0.11"></script>

Usage

<shaf-unified-diff>
<pre>
diff -u originaldirectory/file1 updateddirectory/file1
--- originaldirectory/file1 2007-02-04 16:17:57.000000000 +0100
+++ updateddirectory/file1 2007-02-04 16:18:33.000000000 +0100
@@ -1 +1 @@
-This is the first original file.
+This is the first updated file.
</pre>
</shaf-unified-diff>

The diff still shows if JavaScript is turned off. Don't indent the contents since the <pre> tag assumes preformatted text.

Dependencies