Added `pseudocode.js` support (#2344)

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

_config.yml

@@ -499,7 +499,7 @@ third_party_libraries:
       fonts: "output/chtml/fonts/woff-v2/"
     url:
       fonts: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/output/chtml/fonts/woff-v2/"
-      js: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/tex-mml-chtml.js"
+      js: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/tex-mml-chtml.min.js"
     version: "3.2.0"
   masonry:
     integrity:
@@ -535,6 +535,11 @@ third_party_libraries:
     url:
       js: "https://cdnjs.cloudflare.com/polyfill/v{{version}}/polyfill.min.js?features=es6"
     version: "3"
+  pseudocode:
+    url:
+      css: "https://cdn.jsdelivr.net/npm/pseudocode@{{version}}/build/pseudocode.min.css"
+      js: "https://cdn.jsdelivr.net/npm/pseudocode@{{version}}/build/pseudocode.min.js"
+    version: "2.4.1"
   swiper:
     integrity:
       css: "sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E="

_includes/head.liquid

@@ -45,6 +45,17 @@
 {% endif %}
 
 <!-- Styles -->
+
+<!-- pseudocode -->
+{% if page.pseudocode %}
+  <link
+    defer
+    rel="stylesheet"
+    href="{{ site.third_party_libraries.pseudocode.url.css }}"
+    crossorigin="anonymous"
+  >
+{% endif %}
+
 {% if site.icon.size <= 4 %}
   <link
     rel="shortcut icon"

_includes/scripts/mathjax.liquid

@@ -1,17 +1,19 @@
 {% if site.enable_math %}
-  <!-- MathJax -->
+  {% unless page.pseudocode %}
-  <script type="text/javascript">
+    <!-- MathJax -->
-    window.MathJax = {
+    <script type="text/javascript">
-      tex: {
+      window.MathJax = {
-        tags: 'ams',
+        tex: {
-      },
+          tags: 'ams',
-    };
+        },
-  </script>
+      };
-  <script
+    </script>
-    defer
+    <script
-    type="text/javascript"
+      defer
-    id="MathJax-script"
+      type="text/javascript"
-    src="{{ site.third_party_libraries.mathjax.url.js }}"
+      id="MathJax-script"
-  ></script>
+      src="{{ site.third_party_libraries.mathjax.url.js }}"
-  <script defer src="{{ site.third_party_libraries.polyfill.url.js }}"></script>
+    ></script>
+    <script defer src="{{ site.third_party_libraries.polyfill.url.js }}"></script>
+  {% endunless %}
 {% endif %}

_includes/scripts/pseudocode.liquid

@@ -0,0 +1,48 @@
+{% if site.enable_math and page.pseudocode %}
+  <!-- MathJax -->
+  <script type="text/javascript">
+    window.MathJax = {
+      tex: {
+        inlineMath: [
+          ['$', '$'],
+          ['\\(', '\\)'],
+        ],
+        displayMath: [
+          ['$$', '$$'],
+          ['\\[', '\\]'],
+        ],
+        processEscapes: true,
+        processEnvironments: true,
+      },
+    };
+  </script>
+  <script
+    type="text/javascript"
+    id="MathJax-script"
+    src="{{ site.third_party_libraries.mathjax.url.js }}"
+  ></script>
+  <script
+    type="text/javascript"
+    src="{{ site.third_party_libraries.pseudocode.url.js }}"
+  ></script>
+  <script>
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') {
+        document.querySelectorAll('pre>code.language-pseudocode').forEach((elem) => {
+          const texData = elem.textContent;
+          const parent = elem.parentElement.parentElement;
+          /* create pseudocode node */
+          let pseudoCodeElement = document.createElement('pre');
+          pseudoCodeElement.classList.add('pseudocode');
+          const text = document.createTextNode(texData);
+          pseudoCodeElement.appendChild(text);
+          /* add pseudocode node and remove the original code block */
+          parent.appendChild(pseudoCodeElement);
+          parent.removeChild(elem.parentElement);
+          /* embed the visualization in the container */
+          pseudocode.renderElement(pseudoCodeElement);
+        });
+      }
+    };
+  </script>
+{% endif %}

_layouts/default.liquid

@@ -64,6 +64,7 @@
     {% include scripts/misc.liquid %}
     {% include scripts/badges.liquid %}
     {% include scripts/mathjax.liquid %}
+    {% include scripts/pseudocode.liquid %}
     {% include scripts/analytics.liquid %}
     {% include scripts/progressBar.liquid %}
     {% include scripts/wechatModal.liquid %}

_posts/2024-04-15-pseudocode.md

@@ -0,0 +1,71 @@
+---
+layout: post
+title: a post with pseudo code
+date: 2024-04-15 00:01:00
+description: this is what included pseudo code could look like
+tags: formatting code
+categories: sample-posts
+pseudocode: true
+---
+
+This is an example post with some pseudo code rendered by [pseudocode](https://github.com/SaswatPadhi/pseudocode.js). The example presented here is the same as the one in the [pseudocode.js](https://saswat.padhi.me/pseudocode.js/) documentation, with only one simple but important change: everytime you would use `$`, you should use `$$` instead. Also, note that the `pseudocode` key in the front matter is set to `true` to enable the rendering of pseudo code. As an example, using this code:
+
+````markdown
+```pseudocode
+% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
+\begin{algorithm}
+\caption{Quicksort}
+\begin{algorithmic}
+\PROCEDURE{Quicksort}{$$A, p, r$$}
+    \IF{$$p < r$$}
+        \STATE $$q = $$ \CALL{Partition}{$$A, p, r$$}
+        \STATE \CALL{Quicksort}{$$A, p, q - 1$$}
+        \STATE \CALL{Quicksort}{$$A, q + 1, r$$}
+    \ENDIF
+\ENDPROCEDURE
+\PROCEDURE{Partition}{$$A, p, r$$}
+    \STATE $$x = A[r]$$
+    \STATE $$i = p - 1$$
+    \FOR{$$j = p$$ \TO $$r - 1$$}
+        \IF{$$A[j] < x$$}
+            \STATE $$i = i + 1$$
+            \STATE exchange
+            $$A[i]$$ with $$A[j]$$
+        \ENDIF
+        \STATE exchange $$A[i]$$ with $$A[r]$$
+    \ENDFOR
+\ENDPROCEDURE
+\end{algorithmic}
+\end{algorithm}
+```
+````
+
+Generates:
+
+```pseudocode
+% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
+\begin{algorithm}
+\caption{Quicksort}
+\begin{algorithmic}
+\PROCEDURE{Quicksort}{$$A, p, r$$}
+    \IF{$$p < r$$}
+        \STATE $$q = $$ \CALL{Partition}{$$A, p, r$$}
+        \STATE \CALL{Quicksort}{$$A, p, q - 1$$}
+        \STATE \CALL{Quicksort}{$$A, q + 1, r$$}
+    \ENDIF
+\ENDPROCEDURE
+\PROCEDURE{Partition}{$$A, p, r$$}
+    \STATE $$x = A[r]$$
+    \STATE $$i = p - 1$$
+    \FOR{$$j = p$$ \TO $$r - 1$$}
+        \IF{$$A[j] < x$$}
+            \STATE $$i = i + 1$$
+            \STATE exchange
+            $$A[i]$$ with $$A[j]$$
+        \ENDIF
+        \STATE exchange $$A[i]$$ with $$A[r]$$
+    \ENDFOR
+\ENDPROCEDURE
+\end{algorithmic}
+\end{algorithm}
+```

_sass/_base.scss

@@ -1127,3 +1127,15 @@ swiper-container {
   --swiper-pagination-color: var(--global-theme-color);
   --swiper-pagination-bullet-inactive-color: var(--global-text-color);
 }
+
+.ps-root {
+  .ps-algorithm {
+    margin: 0.8em 0;
+    border-top: 3px solid var(--global-text-color);
+    border-bottom: 2px solid var(--global-text-color);
+  }
+
+  .ps-algorithm.with-caption > .ps-line:first-child {
+    border-bottom: 2px solid var(--global-text-color);
+  }
+}