为HTMLy添加代码高亮渲染和KaTeX支持

HTMLy这一框架，简单，高效，很棒，我喜欢。但这玩意也有缺点。比如，默认不支持Katex。

解决方法也很简单。HTMLy通过主题模板来渲染网站。我们可以通过魔改主题文件，手动把Katex和Highlightjs相关代码塞进去，就可以让我们的网站支持这些神奇功能了。

1. 创建主题

themes目录下存放着我们的所有可选主题。我们默认的主题是tailwind.
这个主题使用tailwindcss来渲染各种东西。本身已经很漂亮了。
为了让它支持Katex, 我们需要稍微修改下东西。

我们复制tailwind文件夹到相同路径，重命名为tailwind-katex.
这样一来，我们实际上新建了一个主题，以原版tailwind主题为基底。就是这么简单。

2. 修改 <head>, 添加引用

打开该文件夹，找到layout.html.php。打开它。我们在<head>里添加条目：我们计划用CDN来引入所需js。

原始Head：

1
2
3
4
5
6
7
<head>
	<?php echo head_contents();?>
	<?php echo $metatags;?>
	<link rel="stylesheet" href="<?php echo theme_path();?>css/typography.css" data-precedence="next" />
	<link rel="stylesheet" href="<?php echo theme_path();?>css/tailwind.css" data-precedence="next" />
	<link rel="stylesheet" href="<?php echo theme_path();?>css/style.css" data-precedence="next" />
</head>

添加了引用的Head：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
	<?php echo head_contents();?>
	<?php echo $metatags;?>
	<link rel="stylesheet" href="<?php echo theme_path();?>css/typography.css" data-precedence="next" />
	<link rel="stylesheet" href="<?php echo theme_path();?>css/tailwind.css" data-precedence="next" />
	<link rel="stylesheet" href="<?php echo theme_path();?>css/style.css" data-precedence="next" />

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
	<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
	<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
	<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>

</head>

3. 修改 <script> 段，添加初始化函数

将下列代码追加到script块的最上方。这将用于初始化上述的两个库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 追加Katex支持。
document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {
        delimiters: [
            {left: "$$", right: "$$", display: true},   // 块级公式
            {left: "$", right: "$", display: false},    // 行内公式
            {left: "\\[", right: "\\]", display: true},
            {left: "\\(", right: "\\)", display: false}
        ],
        throwOnError: false
    });
});

// 追加HighlightJS支持。
document.addEventListener("DOMContentLoaded", function() {
    // 高亮所有代码块
    hljs.highlightAll();

    // 如果你之前有 KaTeX，放一起：
    renderMathInElement(document.body, {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "$", right: "$", display: false}
        ],
        throwOnError: false
    });
});

4. 完毕！

一切就绪。此时你的HTMLy博客应该就能正常显示Katex公式和代码高亮了！