Katex显示问题

[Philchieh]

Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate. 请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。

Issue Checklist

• [ ] I am using the latest version of NexT.
• [ ] I have already read the relevant documents of Hexo and NexT.
• [ ] I have already searched for current issues, which does not help me.

---

Expected behavior

希望显示Katex

Actual behavior

在安装hexo-renderer-markdown-it-plus 并打开主题开关后，仍不能显示公式。然而mathjax是支持的。 katex: enable: true

See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex

copy_tex: false

• Links to demo site with this issue: https://philchieh.github.io/2020/08/12/BSGS%20%E7%AE%97%E6%B3%95%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/
• Links to repository or source code of the blog:
• Screenshots:

Steps to reproduce the behavior

Environment Information

Node.js and NPM Information

Package dependencies Information

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/Philchieh/Philchieh.github.io.git
  branch: master

NexT Configuration

# Math Formulas Render Support
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: true
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

Other Information

谷歌浏览器，win10系统

[welcome[bot]]

Thanks for opening this issue, maintainers will get back to you as soon as possible!

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label Question to this issue, with a confidence of 0.63. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[stevenjoezhang]

设置没有问题。如果 hexo-renderer-markdown-it-plus 是最近安装的，执行一下 hexo clean 试试。

[Philchieh]

感谢您的回复，我尝试hexo clean后仍不能解决问题

[stevenjoezhang]

是否方便提供一下安装的全部 Hexo 插件（在博客根目录下执行 npm ls --depth 0）。可能是与其它的插件冲突导致的问题，我可以帮忙测试一下。

[Philchieh]

如下所示，十分感谢 $ npm ls --depth 0 hexo-site@0.0.0 D:\Philchieh's Blog +-- hexo@5.0.2 +-- hexo-deployer-git@2.1.0 +-- hexo-generator-archive@1.0.0 +-- hexo-generator-category@1.0.0 +-- hexo-generator-index@2.0.0 +-- hexo-generator-tag@1.0.0 +-- hexo-renderer-ejs@1.0.0 +-- hexo-renderer-markdown-it-plus@1.0.4 +-- hexo-renderer-marked@3.0.0 +-- hexo-renderer-stylus@1.1.0 `-- hexo-server@2.0.0

[stevenjoezhang]

试试这样：

npm uninstall hexo-renderer-marked
hexo clean

我待会把文档更新一下，这几个插件的使用描述有些不清楚

[Philchieh]

您好，按照您的操作后已经能够显示KaTex公式，然而公式显示十分诡异，请您打开以下网站以得知我的情况 https://philchieh.github.io/2020/08/12/BSGS%20%E7%AE%97%E6%B3%95%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/

[stevenjoezhang]

您好，可能是由于字体原因，在不同浏览器上显示有差异

[Philchieh]

我在我的浏览器上也是这个样子，但是正常的Katex应该与Mathjax的效果一致，如下图

[Philchieh]

请问是主题的问题亦或是Katex的问题？

[stevenjoezhang]

KaTeX 的渲染分为两步：

1. hexo-renderer-markdown-it-plus 插件用于预处理，例如将 $\frac{\pi^2}{6}$ 转为

   <span class="katex"><span class="katex-mathml"><math><semantics><mrow><mfrac><msup><mi> π</mi><mn>2</mn></msup><mn>6</mn></mfrac></mrow><annotation encoding="application/x-tex">\frac{\pi^2}{6}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.36292em;vertical-align:-0.345em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.01792em;"><span style="top:-2.6550000000000002em;"><span class="pstrut" style="height:3em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">6</span></span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.394em;"><span class="pstrut" style="height:3em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight"><span class="mord mathdefault mtight" style="margin-right:0.03588em;">π</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8913142857142857em;"><span style="top:-2.931em;margin-right:0.07142857142857144em;"><span class="pstrut" style="height:2.5em;"></span><span class="sizing reset-size3 size1 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.345em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span>

2. 而 NexT 负责加载 katex.min.css，为上面的这一段 HTML 添加样式。

从您提供的页面来看，第二步加载的 CSS 没问题，因此不是 NexT 的问题。

我自己一直用的是 MathJax，对 KaTeX 不熟。个人感觉这很有可能与 Markdown Renderer 有关，可以根据文档换用 hexo-renderer-markdown-it 插件试试： https://theme-next.js.org/docs/third-party-services/math-equations#Render-Engines 。

[Philchieh]

意思是使用后者，也就是hexo-renderer-markdown-it with markdown-it-katex plugin对吗

[Philchieh]

您好，我找到问题了，在layout third-party math 路径下的katex.njk中cdn.jsdelivr.net/npm/katex@0 改为cdn.jsdelivr.net/npm/katex@0.10.0即可。

[Philchieh]

感谢回答，我先关闭了

[stevenjoezhang]

嗯，应该是因为 hexo-renderer-markdown-it 所依赖的 @iktakahiro/markdown-it-katex ，直到最新版本才将使用的 KaTeX 版本从 0.10.0 升级为 0.11.1，导致版本不匹配。这个插件也有两年没更新了，可能需要寻找替代品。 见 https://github.com/iktakahiro/markdown-it-katex/commit/5238dd1b3da04fc17148c07fa018f26599c9794e

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. It is possible issue was solved or at least outdated. Feel free to open new for related bugs.