blinkfox / hexo-theme-matery

A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问:http://blinkfox.com
https://blinkfox.github.io/
Apache License 2.0
5.23k stars 1.25k forks source link

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

Open Milarodvia opened 5 years ago

Milarodvia commented 5 years ago

RT,下面是渲染效果:

TIM截图20190612164707.png

正确的效果应该是:

TIM截图20190612164722.png

希望作者尽快修复。


部分公式渲染正确:

TIM截图20190612164919.png

blinkfox commented 5 years ago

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

Milarodvia commented 5 years ago

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

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

UKeyboard commented 5 years ago

参考 https://i-m.dev/posts/20190304-210101.html

upupming commented 5 years ago

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

liuqdev commented 5 years ago

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

  1. 在主题的_config.yml开启mathjax

  2. 在你要渲染的文章开头添加mathjax: true

  3. 在终端执行:

    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
  4. 在博客根目录下,找到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*\$\$(?!\$)/,
    };
  5. 执行:

    hexo clean
    hexo g
    hexo s

    查看最终的效果。

参考

godweiyang commented 5 years ago

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

chengpengzhao commented 4 years ago

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

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

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

njulhy commented 4 years ago

不用改渲染引擎,把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 commented 4 years ago

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

LamForest commented 3 years ago

这是因为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 commented 3 years ago

https://github.com/blinkfox/hexo-theme-matery/issues/119#issuecomment-511373555 上边这个确实可以渲染LaTeX公式,但出现这种情况怎么办 image 下标混叠了

fliaping commented 1 year ago

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