剧透中的 Mathjax 延迟渲染代码

如何解决剧透中的 Mathjax 延迟渲染代码

我正在尝试为以下可见元素渲染 mathjax。我隐藏了答案，只想在有人点击按钮时呈现数学。目前 mathjax 甚至在剧透中渲染数学也做得非常出色。 Davide (mathjax) 提出了一个解决方案，但我无法得到他的建议。谁能帮我这个？目标是尽可能快地渲染 mathjax。我正在使用的代码 https://cdn.jsdelivr.net/gh/srk7774/cg/mj3_chtml.js

请对 html 代码进行必要的更改，以便我能更好地理解它。

大卫的建议： https://groups.google.com/g/mathjax-users/c/Xr-arJPN2kI

网站： https://www.campusgate.in/2011/11/permutations.html

<span class="q-Box">1</span>How many arrangements can be made of the letters of the word &#8220;ASSASSINATION&#8221;? In how many of them are the vowels always together?<br />
<span class="step">A</span>$\dfrac{{13!}}{{{{\left( {4!} \right)}^2}}},\;\dfrac{{8! \times 6!}}{{{{\left( {4!} \right)}^2}}}$<br />
<span class="step">B</span>$\dfrac{{13!}}{{6! \times 7!}},\;\dfrac{{8! \times 6!}}{{{{\left( {4!} \right)}^2}}}$<br />
<span class="step">C</span>$\dfrac{{13!}}{{6! \times 7!}},\;\dfrac{{8! \times 6!}}{{6! \times 7!}}$<br />
<span class="step">D</span>$\dfrac{{13!}}{{{{\left( {4!} \right)}^2}}},\;\dfrac{{8! \times 6!}}{{6! \times 7!}}$<br />
<div class="border" id="spoiler1" style="display: none;">Answer: A<br />
<div class="border1" id="spoiler1A" style="display: none;">Explanation:<br />
Total letters in the word $ASSASSINATION$ $=13$<br />
$(SSSS),(AAA),(II),(NN),T,O$<br />
<span class="f-Box">Formula:</span>Number of ways of arranging $n$ items of which $p$ are alike,$q$ alike and so on $ = \dfrac{{n!}}{{p! \times q! \times ...}}$<br />
Total number of arrangements $ = \dfrac{{13!}}{{4! \times 3! \times 2! \times 2!}}$ $ = \dfrac{{13!}}{{4! \times 4 \times 3!}}$ $ = \dfrac{{13!}}{{{{\left( {4!} \right)}^2}}} \qquad (1)$ <br />
Vowels in the given word $=AAAIIO$<br />
Let us put them in a Box and name it a letter $X$.<br />
$\Boxed{AAAIIO}_{\rightarrow{X}},S,N,T $<br />
Now total letters $= 8$<br />
Number of ways of arranging $8$ letters in $8$ places $ = \dfrac{{8!}}{{4! \times 2!}}$<br />
Numebr of ways the vowels in the Box arrange themselves $ = \dfrac{{6!}}{{3! \times 2!}}$<br />
Total ways in which all vowels together $ = \dfrac{{8!}}{{4! \times 2!}} \times \dfrac{{6!}}{{3! \times 2!}}$ $ = \dfrac{{8! \times 6!}}{{{{\left( {4!} \right)}^2}}} \qquad (2)$<br />
<!-- explanation Ends--></div><button onclick="if(document.getElementById('spoiler1A') .style.display=='none') {document.getElementById('spoiler1A') .style.display=''}else{document.getElementById('spoiler1A') .style.display='none'}" title="Click to show/hide content" type="button">Show Explanation</button></div><button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" title="Click to show/hide content" type="button">Show Answer</button><br />
<br />
<span class="q-Box">2</span>In how many ways can the letters of the word ARRANGE be arranged so that two R&#8217;s are never together <br />
<span class="step">A</span>900<br />
<span class="step">B</span>360<br />
<span class="step">C</span>120<br />
<span class="step">D</span>1260<br />
<div class="border" id="spoiler2" style="display: none;">Answer: A<br />
<div class="border1" id="spoiler2A" style="display: none;">Explanation:<br />
<img border="0" data-original-height="277" data-original-width="422" src="https://1.bp.blogspot.com/-3LjCBAS8QzE/Xcw3ipNYQLI/AAAAAAAAepc/R70tcTQd5j8g2wLmpmBuY-0tCv8tYq7pwCLcBGAsYHQ/s1600/aarr11%2B%25282%2529.png" /><br />
$ARRANGE$ $=(AA),(RR),G,E$<br />
Two R&#8217;s are never together $=$ (Total possible arrangements) $-$ (Two R&#8217;s are always together)<br />
Total number of arrangements = $\dfrac{{7!}}{{2! \times 2!}}$ = $\dfrac{{7 \times 6 \times 5 \times 4 \times 3 \times 2 \times 1}}{{2 \times 2}}$ $= 1260$<br />
<br />
Arrangements with both R&#8217;s together:<br />
Let us put both $R$'s are in a Box and name it letter $X$.<br />
$\Boxed{RR}_{\rightarrow{X}},A,E $<br />
Number of ways of arranging above $6$ letters = $\dfrac{{{\text{6}}!}}{{{\text{2}}!}}$ $= 360$<br />
(Note: Two $R$'s in the Box arrange only one way)<br />
<br />
R&#8217;s never together $= 1260 - 360 = 900$<br />
<!-- explanation Ends--></div><button onclick="if(document.getElementById('spoiler2A') .style.display=='none') {document.getElementById('spoiler2A') .style.display=''}else{document.getElementById('spoiler2A') .style.display='none'}" title="Click to show/hide content" type="button">Show Explanation</button></div><button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" title="Click to show/hide content" type="button">Show Answer</button><br />
<br /> 

解决方法

幸运的是，即使没有太多的 JS 和 HTML 知识，也可以按照 Davide 的建议（我认为这是最好的方法）进行操作。您链接的 code snippet 告诉 MathJax 不要在具有 tex2jax_ignore 类的元素内部呈现，因此您可以将此类添加到剧透 div 中。以 ID 为 div 的 spoiler1A 为例，您可以设置 class="border1 tex2jax_ignore" 以防止 MathJax 在页面加载时对该元素进行排版。您还可以将 tex2jax_ignore 添加到您不想在其中呈现的每个元素。

然后您需要告诉 MathJax 在显示时在扰流板中渲染数学。要进行设置，您需要基于 the one in MathJax documentation 定义此函数 - 我猜您可能希望将它放在 script 标记中after {{ 1}} 标记加载 https://cdn.jsdelivr.net/gh/srk7774/cg/mj3_chtml.js：

script

最后，您需要更改显示数学的按钮的 <script> function typeset(id) { MathJax.startup.promise = MathJax.startup.promise .then(() => MathJax.typesetPromise([id])) .catch((err) => console.log('Typeset failed: ' + err.message)); return MathJax.startup.promise; } </script> 处理程序：而不是 onclick，

你可以写onclick="if(document.getElementById('spoiler1A') .style.display=='none') {document.getElementById('spoiler1A') .style.display=''}else{document.getElementById('spoiler1A') .style.display='none'}"。

这将删除 onclick="if(document.getElementById('spoiler1A') .style.display=='none') {document.getElementById('spoiler1A') .style.display=''; document.getElementById('spoiler1A').classList.remove('tex2jax_ignore');typeset('spoiler1A')}else{document.getElementById('spoiler1A') .style.display='none'}" 类并调用我们定义的 tex2jax_ignore 方法来告诉 MathJax 呈现该元素。