2022年，GitHub主站通过workflow提供了mermaid支持，然而该服务尚未在GitHub Pages上得到支持。
在原生jekyll中，可以通过插件的方式实现Mermaid和LaTeX表达式等内容的渲染，而在Github Pages中部署的jekyll默认只启用白名单中的插件，其允许使用的插件非常有限，jekyll-mermaid等插件不在其中。标准的Markdown语法也并不支持LaTeX数学公式的渲染，同样没有相关插件支持。
参考博客 如何让 GitHub Pages 中通过 Markdown 编辑的博客支持 Mermaid？ 中的做法：在jekyll项目的 _includes 目录（如果没有就手动创建该目录）下创建一个 .html 文件用来加载外部CDN服务的Mermaid脚本，如 mermaid_support.html。内容如下
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
mermaid.initialize({ startOnLoad: false });
await mermaid.run({
querySelector: '.language-mermaid',
});
</script>此时还不能生效，需要将其加载到目标页面中。
jekyll加载 .md 文件时，会读取其上方的 layout: xxx 配置项，如这一项不存在，则默认为 layout: post，即加载 _layouts 下的 post.html。
Github Pages的jekyll所支持的Theme中，参考它们库中的
_layouts目录，这是在部署到Github Pages时默认载入且不会出现在本地的文件，按照jekyll官方文档-Theme的描述，通过在本地创建对应的目录和同名的文件以覆盖默认文件，实现主题的定制化。
GitHub Pages所支持的主题通常包含 default.html 和 post.html 两个layout，而在我们的 XXX.md 中又导入了 post.html ，所以三者的关系通常是
graph BT
a[XXX.md] --> b[post.html] --> c[default.html]
从对应的jekyll主题库中复制对应的 default.html 下来，拷贝到自己的 _layouts 目录下。打开浏览可以注意到里面的head标签
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
{% include head-custom.html %}
{% seo %}
</head>
{% xxx %}是Liquid模板语言
{% include head-custom.html %} 其实是开放给我们自定义的头部，这样我们可以不用修改默认 default.html，比较优雅的做法是在 _include 目录下手动创建一个 head_custom.html 并写入以下内容
{% if page.mermaid %}
{% include mermaid_support.html %}
{% endif %}同样，参考博客 Github page数学公式无法正常显示解决方案(MathJax) 通过类似的做法实现对LaTeX公式的渲染