change Diff to output <ins>, <del>

src/core/operations/Diff.mjs

@@ -119,9 +119,9 @@ class Diff extends Operation {
 
         for (let i = 0; i < diff.length; i++) {
             if (diff[i].added) {
-                if (showAdded) output += "<span class='hl5'>" + Utils.escapeHtml(diff[i].value) + "</span>";
+                if (showAdded) output += "<ins>" + Utils.escapeHtml(diff[i].value) + "</ins>";
             } else if (diff[i].removed) {
-                if (showRemoved) output += "<span class='hl3'>" + Utils.escapeHtml(diff[i].value) + "</span>";
+                if (showRemoved) output += "<del>" + Utils.escapeHtml(diff[i].value) + "</del>";
             } else if (!showSubtraction) {
                 output += Utils.escapeHtml(diff[i].value);
             }

src/web/stylesheets/index.css

@@ -36,4 +36,5 @@
 @import "./layout/_structure.css";
 
 /* Operations */
+@import "./operations/diff.css";
 @import "./operations/json.css";

src/web/stylesheets/operations/diff.css

@@ -0,0 +1,8 @@
+del {
+    background-color: var(--hl3);
+}
+
+ins {
+    text-decoration: underline; /* shouldn't be needed, but Chromium doesn't copy to clipboard without it */
+    background-color: var(--hl5);
+}

tests/operations/tests/StrUtils.mjs

@@ -11,7 +11,7 @@ TestRegister.addTests([
     {
         name: "Diff, basic usage",
         input: "testing23\n\ntesting123",
-        expectedOutput: "testing<span class='hl5'>1</span>23",
+        expectedOutput: "testing<ins>1</ins>23",
         recipeConfig: [
             {
                 "op": "Diff",
@@ -22,7 +22,7 @@ TestRegister.addTests([
     {
         name: "Diff added with subtraction, basic usage",
         input: "testing23\n\ntesting123",
-        expectedOutput: "<span class='hl5'>1</span>",
+        expectedOutput: "<ins>1</ins>",
         recipeConfig: [
             {
                 "op": "Diff",
@@ -33,7 +33,7 @@ TestRegister.addTests([
     {
         name: "Diff removed with subtraction, basic usage",
         input: "testing123\n\ntesting3",
-        expectedOutput: "<span class='hl3'>12</span>",
+        expectedOutput: "<del>12</del>",
         recipeConfig: [
             {
                 "op": "Diff",