Hexo-Fluid 文章Latex公式渲染

问题描述

在使用 Hexo+Fluid 主题上传用 Markdown+Vscode 书写的文档时，发现在文章中嵌入的 LaTeX 公式无法正确渲染。

解决方案

Pandoc

参考博客Hexo LaTeX数学公式渲染的内容，搭配hexo-renderer-pandoc渲染包含 LaTeX 数学公式的博客文章时，出现了多个警告，核心问题是\space、\xrightarrow等 LaTeX 控制序列不被 pandoc 识别。

Mathjax+kramed

hexo-renderer-pandoc对 LaTeX 数学公式的支持并不友好，Hexo 生态中更成熟的方案是使用hexo-renderer-kramed + MathJax，步骤如下：

1.卸载旧渲染器（如果你没有安装上述渲染器请跳过）

npm uninstall hexo-renderer-pandoc --save  # (如果你下载的是其他渲染器请自行卸载)

2.安装新渲染器

npm install hexo-renderer-kramed --save

3.配置 MathJax（让 Hexo 支持 LaTeX 公式）

编辑 Hexo 根目录的_config.yml，在末尾添加：

# 以下是我的配置，可以根据需要自行修改
mathjax:
  tags: none
  single_dollar: true
  cjk_width: 0.9
  normal_width: 0.6
  append_css: true
  every_page: true
  cdn: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
  packages:
  extension_options: {}

4.配置 Fluid 主题支持 MathJax

编辑themes/fluid/_config.yml，找到math相关配置，修改为：

math:
  enable: true
  engine: mathjax
  mathjax:
    src: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
    options:
      tex:
        inlineMath: [ ['$','$'], ['\\(','\\)'] ]
        displayMath: [ ['$$','$$'], ['\\[','\\]'] ]

5.重启 Hexo 服务

hexo clean && hexo g && hexo s # bash

hexo clean; hexo g; hexo s # powershell

完成后，你可以直接使用原本的 LaTeX 公式语法。

ExtraProblem

在完成上述操作后，出现了一些意料之外的情况。大部分公式正常被渲染了，只有个别公式出现如图的情况。

观察后发现是同一类问题，即X_{xxx}的形式存在导致渲染失败，但其余包含该形式的公式却正常渲染了，原因不明。

解决

参考博客不更换插件解决Hexo博客Latex公式的渲染问题的内容，必要的情况下使用 \ 进行转义，即将渲染失败公式中 X_{xxx} X\_{xxx} 的形式。

额外发现

在后来希望将 Latex 公式居中显示时，

<center> $ XXX $ </center>

发现原本不能被正常渲染的公式反而无需修改就能够正常渲染了，修改后反而无法渲染。

另外由于 HTML 标签与 Markdown 语法的解析优先级冲突，在 HTML 标签内的语句使用 ** 加粗无法正常被识别，直接使用 HTML 标签来加粗即可生效。

<b> XXX </b>