Added support for diff2html

Signed-off-by: George Araújo <[email protected]>

_includes/head.liquid

@@ -12,7 +12,9 @@
 >
 
 <!-- Bootstrap Table -->
-<link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.bootstrap-table.version }}/dist/bootstrap-table.min.css">
+{% if page.pretty_table %}
+  <link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.bootstrap-table.version }}/dist/bootstrap-table.min.css">
+{% endif %}
 
 <!-- Fonts & Icons -->
 <link rel="stylesheet" href="{{ '/assets/css/academicons.min.css' | relative_url | bust_file_cache }}">
@@ -71,3 +73,18 @@
     crossorigin=""
   >
 {% endif %}
+
+<!-- diff2html -->
+{% if page.code_diff %}
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
+    media="screen and (prefers-color-scheme: light)"
+  >
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
+    media="screen and (prefers-color-scheme: dark)"
+  >
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css">
+{% endif %}

_includes/scripts/codeDiff.liquid

@@ -0,0 +1,26 @@
+{% if page.code_diff %}
+  <!-- diff2html doesn't go well with Bootstrap Table -->
+  <script
+    src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/js/diff2html-ui.min.js"
+    integrity="sha256-eU2TVHX633T1o/bTQp6iIJByYJEtZThhF9bKz/DcbbY="
+    crossorigin="anonymous"
+  ></script>
+  <script>
+    let theme = localStorage.getItem('theme');
+
+    /* Create echarts chart as another node and hide the code block, appending the echarts node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+    document.querySelectorAll('pre>code.language-diff2html').forEach((elem) => {
+      const textData = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('unloaded');
+      /* create diff node */
+      let diffElement = document.createElement('div');
+      diffElement.classList.add('diff2html');
+      backup.after(diffElement);
+      const configuration = { colorScheme: theme, drawFileList: true, highlight: true, matching: 'lines' };
+      const diff2htmlUi = new Diff2HtmlUI(diffElement, textData, configuration);
+      diff2htmlUi.draw();
+    });
+  </script>
+{% endif %}

_layouts/default.liquid

@@ -48,6 +48,7 @@
     {% include scripts/bootstrap.liquid %}
     {% include scripts/masonry.liquid %}
     {% include scripts/mermaid.liquid %}
+    {% include scripts/codeDiff.liquid %}
     {% include scripts/leaflet.liquid %}
     {% include scripts/chartjs.liquid %}
     {% include scripts/echarts.liquid %}