Added support for typograms

Signed-off-by: George Araujo <george.gcac@gmail.com>

_includes/scripts/typograms.liquid

@@ -0,0 +1,23 @@
+{% if page.typograms %}
+  <script src="{{ '/assets/js/typograms.js' | relative_url | bust_file_cache }}"></script>
+
+  <script>
+    /* Create typogram as another node and hide the code block, appending the typogram node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+    document.onreadystatechange = () => {
+      if (document.readyState === 'complete') {
+        document.querySelectorAll('pre>code.language-typograms').forEach((elem) => {
+          const texData = elem.textContent;
+          const parent = elem.parentElement.parentElement;
+          /* create typograms node */
+          let typogram = document.createElement('pre');
+          typogram.classList.add('typogram');
+          const svg = create("\n" + texData, 0.3, false);
+          typogram.appendChild(svg);
+          parent.appendChild(typogram);
+          parent.removeChild(elem.parentElement);
+        });
+      }
+    };
+  </script>
+{% endif %}

_layouts/default.liquid

@@ -61,6 +61,7 @@
     {% include scripts/echarts.liquid %}
     {% include scripts/vega.liquid %}
     {% include scripts/tikzjax.liquid %}
+    {% include scripts/typograms.liquid %}
     {% include scripts/misc.liquid %}
     {% include scripts/badges.liquid %}
     {% include scripts/mathjax.liquid %}

_posts/2024-04-29-typograms.md

@@ -0,0 +1,27 @@
+---
+layout: post
+title: a post with typograms
+date: 2024-04-29 23:36:10
+description: this is what included typograms code could look like
+tags: formatting diagrams
+categories: sample-posts
+typograms: true
+---
+
+This is an example post with some [typograms](https://github.com/google/typograms/) code.
+
+````markdown
+```typograms
++----+
+|    |---> My first diagram!
++----+
+```
+````
+
+Which generates:
+
+```typograms
++----+
+|    |---> My first diagram!
++----+
+```