How to avoid out-of-div inline mathjax

[zq1997]

I agree and want to create new issue

• Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
• Yes, I was on NexT Documentation Site.
• And yes, I already searched for current issues and this is not help to me.

---

Expected behavior

Sometime inline mathjax code is just too long, and it will be displayed out of the main div, especially on mobile devices.
How can I add a scroll-container outside the mathjax inline code to prevent it from out-of-div? Or is it possible to make it auto breakline (break only when it is needed)?

Actual behavior

Steps to reproduce the behavior

Wirte $a very long inline mathjax code$ and open the page on mobile phone, you can reproduce it.
like $f_{k+1}=x+(k+1)=(x+k)+1=S(x+k)=Comp_1^1[S,f_k]\in{\mathcal{BF}}$

Node.js and NPM Information

v11.10.1
6.8.0

Package dependencies Information

{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.8.0"
},
"dependencies": {
"hexo": "^3.8.0",
"hexo-deployer-rsync": "^0.1.3",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-searchdb": "^1.0.8",
"hexo-generator-sitemap": "^1.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-inject": "^1.0.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-kramed": "^0.1.4",
"hexo-renderer-stylus": "^0.3.3",
"hexo-server": "^0.3.3"
}
}

Hexo Information

Hexo version

hexo: 3.8.0
hexo-cli: 1.1.0
os: Linux 4.15.0-45-generic linux x64
node: 11.10.1
v8: 7.0.276.38-node.17
uv: 1.26.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 67
nghttp2: 1.34.0
napi: 4
llhttp: 1.1.1
http_parser: 2.8.0
openssl: 1.1.1a
cldr: 34.0
icu: 63.1
tz: 2018e
unicode: 11.0

NexT Information

NexT Version:

• Latest Master branch
• Latest Release version
• Old version

NexT Scheme:

• All schemes(maybe)
• Muse
• Mist
• Pisces
• Gemini(I use it)

Issue Checklist

[stevenjoezhang]

A workaround to solve this problem is that you can edit _layout/_third-party/math/mathjax.swig, and add linebreaks property manually. See: http://docs.mathjax.org/en/latest/options/output-processors/HTML-CSS.html?highlight=linebreaks

Or you can simply use displayed math instead of inline math to solve this

[sli1989]

The pr #488 had added the overflow option, but it doesn't work?

[zq1997]

@stevenjoezhang
Nice solution and I sovled it by the following modification.

diff --git a/layout/_third-party/math/mathjax.swig b/layout/_third-party/math/mathjax.swig
index df9b5b9..d8f0b59 100644
--- a/layout/_third-party/math/mathjax.swig
+++ b/layout/_third-party/math/mathjax.swig
@@ -4,6 +4,11 @@
   {% endif %}
 
   MathJax.Hub.Config({
+    "HTML-CSS": {
+      linebreaks: {
+        automatic: true
+      }
+    },
     tex2jax: {
       inlineMath: [ ['$', '$'], ['\\(', '\\)'] ],
       processEscapes: true,

[zq1997]

@sli1989
It seems that PR works for $$block mathjax code$$ but not $inline mathjax code$.
Actually, I find block code works as you show in that PR, the problem is just lies in inline code.
@sli1989 @ivan-nginx Is it possible to add inline mathjax automatic linebreak as theme option in newer version?

[sli1989]

yeah, absolutely. waiting for optimization.

[zq1997]

I would like to show the new picture after set automatic linebreak option, it works perfectly except for the word align problem, as I edited in the picture, the word 成 will be better to align the bottom of mathjax code.
A liitle defect, but anaway, it works.

[sli1989]

anyway. the break of inline math is not recommended when your write your blog.

so u can use enter to use $$ instead.

[ivan-nginx]

@sli1989 is this fine?

[sli1989]

The demo link maybe not generated by the fixed pr.
This problem is about the inline math, but the pr above just fixed the math out of the line. @ivan-nginx

[ivan-nginx]

So, can u regenerate same with fixed PR? To be sure all work fine.

[sli1989]

Yeah, u can this now.
The math out of the line works fine.

[zq1997]

@sli1989 @ivan-nginx
that still has problem if you swith math settings -> math rendere other than HTML+CSS.

I worked for it fews day ago and found the solution, I also wrote a blog about it, but the blog is just in Chinese, so it may help you @sli1989.
The solution is not very elegant and I'm too lazy to describe its detail in English, that's I did not make a PR for it.

[zq1997]

Here is my solution for it.

diff --git a/layout/_third-party/math/mathjax.swig b/layout/_third-party/math/mathjax.swig
index df9b5b9..a21e093 100644
--- a/layout/_third-party/math/mathjax.swig
+++ b/layout/_third-party/math/mathjax.swig
@@ -33,15 +33,19 @@
   MathJax.Hub.Queue(function() {
     var all = MathJax.Hub.getAllJax(), i;
       for (i = 0; i < all.length; i += 1) {
-        all[i].SourceElement().parentNode.className += ' has-jax';
+        document.getElementById(all[i].inputID + '-Frame').parentNode.classList.add('has-jax');
       }
   });
 </script>
 <script src="{{ theme.math.mathjax.cdn }}"></script>
 
 <style>
-.MathJax_Display {
-  overflow-x: scroll;
+.has-jax {
+  overflow-x: auto;
   overflow-y: hidden;
 }
+
+li {
+  list-style-position: inside !important;
+}
 </style>

the blog explains for these change

[1v9]

@zq-97 Maybe a PR? I'm not familiar with mathjax, you can contact others.

[stevenjoezhang]

Need to consider this issue: #658

[zq1997]

@stevenjoezhang use auto instead of scroll solves that problem.
My solution also fix it and I'm trying to make a PR @1v9 now.

[stevenjoezhang]

But some brosers (like macOS safari) won't scroll with CSS overflow-x: auto;

[zq1997]

@stevenjoezhang I make a test for safri but overflow-x: auto; works.

[1v9]

@zq-97 @stevenjoezhang https://caniuse.com/#search=overflow-x

[stevenjoezhang]

@AlynxZhou @1v9 Thanks. Maybe I mistakenly remembered some results of the Mathjax overflow test I did in 2018. I will confirm again

[stevenjoezhang]

We are considering migrating to Mathjax3, but we have not found a way to handle inline math overflow because Mathjax3 is completely rewritten.

mathjax/MathJax#2319 #1314