Support for diff2html (#2133)

Added support to display diff code in a prettier way with
[diff2html](https://diff2html.xyz/).


![image](https://github.com/alshedivat/al-folio/assets/31376482/5f93b09c-3850-499a-999b-cb0ae13fddae)

It displays code like [in this
example](https://diff2html.xyz/demo.html).

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>

_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 }}">
@@ -72,6 +74,21 @@
   >
 {% 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 %}
+
 <!-- Image comparison slider -->
 {% if page.images %}
   {% if page.images.compare %}

_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/diff2html@3.4.47/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 %}

_includes/scripts/misc.liquid

@@ -22,7 +22,10 @@
 {% endif %}
 
 <!-- Bootstrap Table -->
-<script defer src="https://unpkg.com/bootstrap-table@{{ site.bootstrap-table.version }}/dist/bootstrap-table.min.js"></script>
+{% if page.pretty_table %}
+  <!-- Bootstrap Table doesn't go well with diff2html -->
+  <script defer src="https://unpkg.com/bootstrap-table@{{ site.bootstrap-table.version }}/dist/bootstrap-table.min.js"></script>
+{% endif %}
 
 <!-- Load Common JS -->
 <script src="{{ '/assets/js/no_defer.js' | relative_url | bust_file_cache }}"></script>

_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 %}

_posts/2023-03-21-tables.md

@@ -7,7 +7,7 @@ tags: formatting tables
 categories: sample-posts
 giscus_comments: true
 related_posts: true
-datatable: true
+pretty_table: true
 ---
 
 Using markdown to display tables is easy. Just use the following syntax: