Mathjax自動斷行調整

，當我在MathJax文檔閱讀自動換行符Mathjax自動斷行調整

當方程最初排版只計算一次，並且如果用戶改變窗口大小不改變

如何在每次更改窗口大小時動態計算它們？

例如，我有以下代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title>MathJax auto line-breaking</title> 
<script type="text/x-mathjax-config"> 
MathJax.Hub.Config({ 
    CommonHTML: { linebreaks: { automatic: true } }, 
    "HTML-CSS": { linebreaks: { automatic: true } }, 
     SVG: { linebreaks: { automatic: true } } 
}); 
</script> 
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script> 
<style> 
#site-content { 
    width: 70%; 
    margin: 0 auto; 
    border: 1px solid black; 
} 
</style> 
</head> 
<body> 
    <div id="site-content"> 
    <p>Some cool text about math</p> 
    \begin{equation} 
     f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1}) 
    \end{equation} 
    <p>More cool text</p> 
    \begin{equation} 
     f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1}) 
    \end{equation} 
    <p>More cool text</p> 
    \begin{equation} 
     f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1}) 
    \end{equation} 
    <p>...</p> 
    </div> 
</body> 
</html>

如果我在全寬加載這個頁面，然後調整窗口正在發生的事情：

如果可能的話，我想動態添加換行符：

來源

2016-11-16 CMTV

未來的注意事項：cdn.mathjax.org即將到期，請查看https://www.mathjax.org/cdn-shutting-down/獲取遷移提示。 –

實質上，您需要聽取resize事件並在必要時調用MathJax重新呈現。

蠻力例子可能看起來像下面的代碼片段（注意：這不會對SO的片段渲染工作，嘗試this codepen version）

<script type="text/x-mathjax-config"> 
 
    MathJax.Hub.Config({ 
 
    "SVG": {linebreaks: { automatic: true }} 
 
    }); 
 
window.addEventListener('resize', MJrerender); 
 
function MJrerender(){ 
 
MathJax.Hub.Queue(["Rerender",MathJax.Hub]) 
 
}; 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_SVG-full"></script> 
 

 
<h1> Line-breaking should happen on window resize</h1> 
 

 
$$a_1 + a_2 + a_3 + a_4 + a_5 + a_6 + a_7 + a_8 + a_9 + a_{10} + a_{11} + a_{12} + a_{13} + a_{14} + a_{15} + a_{16} + a_{17} + a_{18} + a_{19} + a_{20}$$

注意，這是可怕的效率低下 - - 它在每次調整大小事件時重新渲染所有內容。

一個更明智的方法會扼殺事件，並且只會重新渲染那些太大而不適合父母的元素。有關此示例，請參閱this codepen。

來源

2016-11-16 11:13:41

Mathjax自動斷行調整

回答

相關問題