` ````
<script type="text/javascript">
window.MathJax = {
jax: ["input/TeX", "output/CommonHTML"],
extensions: ["tex2jax.js"],
TeX: {
equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"]
},
/* The MathJax API provides us with the ability to register
callbacks on signals broadcast during its startup sequence.
Documentation:
http://docs.mathjax.org/en/latest/advanced/signals.html
https://docs.mathjax.org/en/v1.1-latest/startup.html */
AuthorInit: function() {
MathJax.Hub.Register.StartupHook("End Typeset", function() {
const fullFontSize = 121;
var renderMath = function() {
/* All formulae that we want to enable responsive scaling
for need to be wrapped with `class="mj-formula"` */
var mjFormulae = document.getElementsByClassName("mj-formula");
if (mjFormulae) {
for (var i = 0; i < mjFormulae.length; ++i) {
var mjFormula = mjFormulae[i];
/* Retrieve the MathJax element `MathJax_CHTML`. If this element
has a descendant `mjx-table`, the element is a multi-line equation
with automatic numbering and its scaling factor has to be calculated
differently. Note: if your output processor is not `CommonHTML`, I
suspect these class names may be different */
var mjElement = mjFormula.getElementsByClassName("MathJax_CHTML")[0];
var mjTable = mjElement.getElementsByClassName("mjx-table")[0];
/* If the equation is single-line, the scaling factor is a function
of `MathJax_CHTML`'s offset width. If it's multi-line, it is a
function of its descendant `mjx-table` */
var scale = 0.8 * (mjTable ?
mjFormula.offsetWidth / mjTable.offsetWidth :
mjFormula.offsetWidth / mjElement.offsetWidth);
/* Apply the scaling factor to the old font size, rounded to the
nearest integer, as long as it does not exceed the max font size */
const oldFontSize = parseInt(mjElement.style.fontSize);
var newFontSize = Math.round(Math.min(oldFontSize * scale, fullFontSize));
mjElement.style.fontSize = `${newFontSize}%`;
}
}
}
/* `renderMath` needs to be called once on the `End Typeset`
signal broadcast so the scaling is applied on first load */
renderMath();
/* Attach an event handler that calls `renderMath` after a small delay */
var timeoutId;
const delay = 250;
window.addEventListener("resize", function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(renderMath, delay);
});
});
}
};
</script>
<body>
<div class="container">
<div class="content">
<h4>Single-line:</h4>
<div class="mj-formula">
$$ (1+x)^n = 1 + nx + \frac{n(n-1)}{2!}x^2 + \frac{n(n-1)(n-2)}{3!}x^3 + \frac{n(n-1)(n-2)(n-3)}{4!}x^4 + \ldots $$
</div>
<h4>Numbered multi-line:</h4>
<div class="mj-formula">
$$\begin{align}
(1+x)^n &= 1 + nx + \frac{n(n-1)}{2!}x^2 + \frac{n(n-1)(n-2)}{3!}x^3 + \frac{n(n-1)(n-2)(n-3)}{4!}x^4 + \ldots \\
(1+x)^n &= 1 + nx + \frac{n(n-1)}{2!}x^2 + \frac{n(n-1)(n-2)}{3!}x^3 + \ldots
\end{align}$$
</div>
</div>
</div>
</body>
```

` ````
body {
background: black;
font-family: "Courier New", sans-serif;
}
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100vh;
}
.content {
background: white;
text-align: center;
width: 80%;
margin: 0 auto;
border-radius: 10px;
padding: 10px;
}
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers