Enable Mermaid for Markdown Code Blocks

in Dev. Log on Blog, Github Pages, Jekyll 
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

Mermaid is a Markdown-inspired tool that renders text into diagrams, which Github natively supports. But unfortunately, Github Pages does not support use of Mermaid by default. So the user has to manually integrate Mermaid into their Github Pages in order to use it.

Luckily, it isn’t that hard to do so with HydeJack theme.

Implementation

You can check the commit directly if you’d like.

_config.yml

Simply puts below option to anywhere.
(Somewhere around # 3rd Party Integrations would be sufficient)

# file: "_config.yml"
mermaid: true

my-scripts.html

Use Hydejack event listener so the code can be executed every time the page gets loaded.

<!-- file: "_includes/my-scripts.html" -->
<script type="module">
  {% if site.mermaid %}
  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
  let config = {
    startOnLoad: true,
    fontFamily: "JetBrains Mono",
    theme: "dark"
  };
  mermaid.initialize(config);
  mermaid.run({ querySelector: ".language-mermaid" });
  {% endif %}
  document
    .getElementById("_pushState")
    .addEventListener("hy-push-state-load", function () {
      {% if site.mermaid %} mermaid.run({ querySelector: ".language-mermaid" }); {% endif %}
    });
</script>

I have manually changed theme to dark as default theme does not fit well with current dark mode of the Hydejack.
Also the fontFamily is changed to my favorite coding font of all time, JetBrains Mono.

Check Mermaid Config Schema for more information.