[halo-dev/halo]2.x 版本是否支持公式

2024-04-09 392 views
5
是什么版本出现了此问题?

2.3

使用的什么数据库?

MySQL 8.x

使用的哪种方式部署?

Docker Compose

发生了什么?

在内容页 head 标签中加入了 <link rel="stylesheet" href="https://unpkg.com/katex@0.12.0/dist/katex.min.css" /> 仍然无法渲染公式。

回答

7

目前还没有精力做这个功能。如果可以的话,欢迎提供思路,如果有兴趣的话,欢迎提交 Pull Request。

4

有一种临时的解决方案:

<!-- 引入至内容页 head 标签 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.4/katex.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.4/katex.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const articleElements = document.querySelectorAll('article');
  articleElements.forEach(function(articleElement) {
    const spanElements = articleElement.querySelectorAll('span.katex--inline, span.katex--display');
    spanElements.forEach(function(spanElement) {
      const texExpression = spanElement.textContent;
      spanElement.outerHTML  = katex.renderToString(texExpression, {
        throwOnError:  false,
        displayMode: spanElement.classList.contains('katex--display')
      });
    });
  });
});
</script>
image-auLTO2J4

Demo 及详细过程:https://blog.hahahumble.com/archives/1679585660732

2

类似于楼上的,Demo 及详细过程:https://blog.hahahumble.com/archives/1679585660732 我的halo 服务好像不行(可版本有点老,版本<1.5),不过js插件替换为下面这个就可以

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            renderMathInElement(document.body, {
              delimiters: [
                  {left: '$$', right: '$$', display: true},
                  {left: '$', right: '$', display: false},
                  {left: '\\(', right: '\\)', display: false},
                  {left: '\\[', right: '\\]', display: true}
              ],
              throwOnError : false
            });
        });
    </script>

另外markdown 文本好像需要采用这种“代码块+math“格式才能比较好渲染: image 上图的公式:

$$ a+b $$

$$g(\lambda ,v)=inf \left\{ g_{1}(\lambda ,v),g_{2}(\lambda ,v), \ldots ,g_{\infty}(\lambda ,v)\right\}$$

$c = \pm\sqrt{a^2 + b^2}$
$$c = \pm\sqrt{a^2 + b^2}$$

$$\begin{align}
x &= a + b + c \\
y &= d + e \\
z &= f + g + h
\end{align}$$

效果: image