Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MathJax无法渲染多行公式(包含解决方案) #119

Open
Milarodvia opened this issue Jun 12, 2019 · 12 comments
Open

MathJax无法渲染多行公式(包含解决方案) #119

Milarodvia opened this issue Jun 12, 2019 · 12 comments

Comments

@Milarodvia
Copy link

RT,下面是渲染效果:

TIM截图20190612164707.png

正确的效果应该是:

TIM截图20190612164722.png

希望作者尽快修复。


部分公式渲染正确:

TIM截图20190612164919.png

@blinkfox
Copy link
Owner

Hexo 与 MathJax 集成本来就会有些问题,会不兼容,只能支持部分的 MathJax 公式

@Milarodvia
Copy link
Author

Hexo 与 MathJax 集成本来就会有些问题,会不兼容,只能支持部分的 MathJax 公式

我之前使用其他的主题是可以正确渲染LaTeX转义的,会不会是渲染器的问题?我再试一试。

@UKeyboard
Copy link

@upupming
Copy link

upupming commented Jun 29, 2019

可以参考https://github.com/Molunerfinn/hexo-theme-melody 的解决方案

@liuqdev
Copy link

liuqdev commented Jul 15, 2019

这是因为 hexo-renderer-marked 渲染存在特殊字符转义和mathjax冲突导致的,可以采用下面方式解决。

  1. 在主题的_config.yml开启mathjax
  2. 在你要渲染的文章开头添加mathjax: true
  3. 在终端执行:
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  1. 在博客根目录下,找到node_modules/kramed/lib/rules/inline.js文件,在inline变量中做出如下修改(以下是修改好后的代码):
var inline = {
  // escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/, 第 11 行, 将其修改为
  escape: /^\\([`*\[\]()#$+\-.!_>])/,
  autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
  url: noop,
  html: /^<!--[\s\S]*?-->|^<(\w+(?!:\/|[^\w\s@]*@)\b)*?(?:"[^"]*"|'[^']*'|[^'">])*?>([\s\S]*?)?<\/\1>|^<(\w+(?!:\/|[^\w\s@]*@)\b)(?:"[^"]*"|'[^']*'|[^'">])*?>/,
  link: /^!?\[(inside)\]\(href\)/,
  reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
  nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
  reffn: /^!?\[\^(inside)\]/,
  strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
  // em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, 第 20 行,将其修改为 
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
  br: /^ {2,}\n(?!\s*$)/,
  del: noop,
  text: /^[\s\S]+?(?=[\\<!\[_*`$]| {2,}\n|$)/,
  math: /^\$\$\s*([\s\S]*?[^\$])\s*\$\$(?!\$)/,
};
  1. 执行:
hexo clean
hexo g
hexo s

查看最终的效果。

参考

@godweiyang
Copy link

楼上方法单独使用是没问题的,但是如果你同时装了代码高亮插件,代码高亮就凉了。
我试验过后发现代码高亮照常装,mathjax还是用原来的marked插件渲染,但是得改一下marked插件js文件里inline的那两行正则表达式,楼上已经指出哪两行了,虽然内容不一样,但是key是一样的,改完后的value也是一样的。

@chengpengzhao
Copy link

chengpengzhao commented Dec 2, 2019

不用改渲染引擎,把node_modules/marked/lib改一改,类似上面那位大哥说的。

escape: /^\\([!"#$%'()*+,\-./:;<=>?@\[\]^_`|~])/,
//去掉了{}、&和\\。当然懂正则表达式的话多研究一下也行,以免其他地方出问题(我还没遇到)
//escape: escape: /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,
br: /^ {2,}\n(?!\s*$)/,
//br: /^( {2,}|\\)\n(?!\s*$)/,
//br部分再改一改

改完之后基本上除了e_r(x^{*})=\frac{x-x^*}{x^*}这种不加转义没办法之外,多行的也能正常显示。
我在自己博客测试了下,效果还行。
(em部分没改)

@blinkfox blinkfox changed the title MathJax无法渲染多行公式 MathJax无法渲染多行公式(内含解决方案) Dec 2, 2019
@blinkfox blinkfox changed the title MathJax无法渲染多行公式(内含解决方案) MathJax无法渲染多行公式(包含解决方案) Dec 2, 2019
@njulhy
Copy link

njulhy commented Jul 24, 2020

不用改渲染引擎,把node_modules/marked/lib改一改,类似上面那位大哥说的。

escape: /^\\([!"#$%'()*+,\-./:;<=>?@\[\]^_`|~])/,
//去掉了{}、&和\\。当然懂正则表达式的话多研究一下也行,以免其他地方出问题(我还没遇到)
//escape: escape: /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,
br: /^ {2,}\n(?!\s*$)/,
//br: /^( {2,}|\\)\n(?!\s*$)/,
//br部分再改一改

改完之后基本上除了e_r(x^{*})=\frac{x-x^*}{x^*}这种不加转义没办法之外,多行的也能正常显示。
我在自己博客测试了下,效果还行。
(em部分没改)

按照你的改了没什么反应……

@MakerGYT
Copy link

可能需要将换行符\\改为\\\\,
可以试试服务端方案markdown-it-latex2img 稳定兼容

@LamForest
Copy link
Contributor

这是因为 hexo-renderer-marked 渲染存在特殊字符转义和mathjax冲突导致的,可以采用下面方式解决。

  1. 在主题的_config.yml开启mathjax
  2. 在你要渲染的文章开头添加mathjax: true
  3. 在终端执行:
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  1. 在博客根目录下,找到node_modules/kramed/lib/rules/inline.js文件,在inline变量中做出如下修改(以下是修改好后的代码):
var inline = {
  // escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/, 第 11 行, 将其修改为
  escape: /^\\([`*\[\]()#$+\-.!_>])/,
  autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
  url: noop,
  html: /^<!--[\s\S]*?-->|^<(\w+(?!:\/|[^\w\s@]*@)\b)*?(?:"[^"]*"|'[^']*'|[^'">])*?>([\s\S]*?)?<\/\1>|^<(\w+(?!:\/|[^\w\s@]*@)\b)(?:"[^"]*"|'[^']*'|[^'">])*?>/,
  link: /^!?\[(inside)\]\(href\)/,
  reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
  nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
  reffn: /^!?\[\^(inside)\]/,
  strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
  // em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, 第 20 行,将其修改为 
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
  br: /^ {2,}\n(?!\s*$)/,
  del: noop,
  text: /^[\s\S]+?(?=[\\<!\[_*`$]| {2,}\n|$)/,
  math: /^\$\$\s*([\s\S]*?[^\$])\s*\$\$(?!\$)/,
};
  1. 执行:
hexo clean
hexo g
hexo s

查看最终的效果。

参考

兄弟,网上的方法试了一圈,两年过去了,还是你的答案最有效,感谢

@actforjason
Copy link

#119 (comment)
上边这个确实可以渲染LaTeX公式,但出现这种情况怎么办
image
下标混叠了

@fliaping
Copy link

fliaping commented Sep 2, 2023

hugo 也有这个问题,目前最好的办法是通过html 标签抱起来,例如 <div> 或者 <span> 或者<p>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests