剧透中的 Mathjax 延迟渲染代码

Question

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

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

Davide 的建议： 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, S, S, S, N, 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), N, 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, A, N, G, 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 /> 

Answer 1

幸运的是，在没有太多 JS 和 HTML 知识的情况下，可以按照 Davide 的建议（我认为这是最好的方法）去做。 您链接的代码片段告诉 MathJax 不要在带有tex2jax_ignore class 的元素内部渲染，因此您可以将此 class 添加到扰流器 div 中。 以id为spoiler1A的div为例，您可以设置class="border1 tex2jax_ignore"以防止MathJax在页面加载时排版该元素。 您还可以将tex2jax_ignore添加到您不想在其中渲染的每个元素中。

然后你需要告诉 MathJax 在剧透中渲染数学。 要进行设置，您需要根据MathJax 文档中的定义此 function - 我猜您可能希望将其放在加载https://cdn.jsdelivr.net的script标签之后的script标签中/gh/srk7774/cg/mj3_chtml.js ：

<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 class 并调用我们定义的typeset方法来告诉 MathJax 呈现该元素。