feat: add algorithm shortcode to render pseudocodes nicely

Author: AnvarAtayev

assets/_custom.scss

@@ -372,6 +372,82 @@ figure.image-with-source {
   opacity: 1;
 }
 
+// Algorithm pseudocode blocks
+.algorithm {
+  margin: 1em 0;
+  border-top: 1px solid var(--gray-500);
+  border-bottom: 1px solid var(--gray-500);
+
+  .algorithm-header {
+    position: relative;
+    padding: $padding-4 0;
+    border-bottom: 1px solid var(--gray-200);
+
+    .algorithm-title {
+      margin: 0;
+    }
+  }
+
+  .algorithm-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: $padding-4;
+    color: var(--body-font-color);
+    opacity: 0.35;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    line-height: 0;
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    svg {
+      transition: transform 0.2s ease;
+    }
+
+    &[aria-expanded="true"] svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  .algorithm-body {
+    display: none;
+    padding: $padding-4 0 $padding-8;
+    font-style: normal;
+    line-height: 1.5;
+
+    &--open {
+      display: block;
+    }
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    p {
+      margin: 0;
+      text-indent: 0;
+    }
+
+    .indent {
+      padding-left: 1.5em;
+    }
+
+    mjx-container {
+      font-size: 100% !important;
+    }
+  }
+}
+
+
 .brand-row {
   display: flex;
   align-items: center;

layouts/partials/docs/inject/body.html

@@ -64,4 +64,14 @@
     btn.setAttribute("aria-expanded", !open);
     body.classList.toggle("details-collapse-body--open", !open);
   });
+
+  // Collapsible algorithm blocks
+  document.addEventListener("click", event => {
+    const btn = event.target.closest(".algorithm-toggle");
+    if (!btn) return;
+    const body = btn.closest(".algorithm").querySelector(".algorithm-body");
+    const open = btn.getAttribute("aria-expanded") === "true";
+    btn.setAttribute("aria-expanded", !open);
+    body.classList.toggle("algorithm-body--open", !open);
+  });
 </script>

layouts/shortcodes/algorithm.html

@@ -0,0 +1,32 @@
+{{/* Algorithm pseudocode shortcode.
+Renders a numbered algorithm block with a collapsible body.
+
+Usage:
+
+{{% algorithm number="1" title="(Gradient Descent)" %}}
+Require: $\alpha$: Step size
+
+**while** not converged do
+
+$\theta \leftarrow \theta - \alpha \nabla f$
+
+**end while**
+{{% /algorithm %}}
+
+Parameters:
+  number: (optional) Algorithm number, e.g. "1" or "2.3"
+  title:  (optional) Algorithm title, e.g. "(Gradient Descent)"
+*/}}
+{{- $number := .Get "number" -}}
+{{- $title := .Get "title" -}}
+<div class="algorithm">
+<div class="algorithm-header">
+<p class="algorithm-title"><strong>Algorithm{{ with $number }} {{ . }}{{ end }}{{ with $title }} {{ . | markdownify }}{{ end }}</strong></p>
+<button class="algorithm-toggle" aria-expanded="false" aria-label="Toggle algorithm">
+<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+</button>
+</div>
+<div class="algorithm-body">
+{{ .Inner }}
+</div>
+</div>

layouts/shortcodes/indent.html

@@ -0,0 +1,3 @@
+<div class="indent">
+{{ .Inner }}
+</div>