Math

This page demonstrates how we use MathJax and JavaScript to display math equations and formulas on the website. Equations can be displayed inline or within figures.

Math Figures

To render an equation within a figure, use the $$ xxxx $$ LaTeX markup. See the example in Figure 1 below.

$$Na_{(s)} \rightarrow Na^{+}_{(s)} + e^{-}$$ 
            
                

<div class="figure">

	<figure>
		$$Na_{(s)} \rightarrow Na^{+}_{(s)} + e^{-}$$
	</figure>

</div>

Inline Math

The MathML can also be used to represent mathematical equations or formulas inline with the text. To do so, use \( xxxx \). See Figure 2 below.

For example, \( y=5^x \) is an exponential equation since the exponent is the variable x (also said as "5 to the power of x"), while \( y=5^5 \) is not an exponential equation since the exponent is 5 and not a variable. We often write exponential equations as \( y=a b^x \), where a and b are constants (numbers that don't change value) and x and y are variables. 

            
                

<p>
	For example, \( y=5^x \) is an exponential equation since the exponent is the variable x (also said as "5 to the power of x"), while \( y=5^5 \) is not an exponential equation since the exponent is 5 and not a variable. We often write exponential equations as \( y=a b^x \), where <em>a</em> and <em>b</em> are constants (numbers that don't change value) and <em>x</em> and <em>y</em> are variables.
</p>

Adding Color to MathML

To use the \textcolor command, follow the syntax: \textcolor{color}{text}. Here, color is the name of the color you want to apply (e.g., blue, red, etc.), and text is the part of the equation you want to color.

$$C_6H_{12}O_6 + \textcolor{blue}{6}O_2 \rightarrow \textcolor{blue}{6}CO_2 + \textcolor{blue}{6}H_2O + \textit{energy}$$ 
            
                

<div class="figure">

	<figure>
		$$C_6H_{12}O_6 + \textcolor{blue}{6}O_2 \rightarrow \textcolor{blue}{6}CO_2 + \textcolor{blue}{6}H_2O + \textit{energy}$$
	</figure>

</div>

MathJax Dependencies

Mathjax requires two scripts to be loaded (before the closing </body> tag): the MathJax configuration is set in the /dist/js/mathjax-config.js file. The MathJax script is loaded asynchronously from the CDN.

            
                

<!-- MathJax Script -->
<script src="https://cavidano.github.io/visionlearning/dist/js/mathjax-config.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js" async></script>