Wednesday 7 October 2015

Displaying math in webpages with MathJax

MathJax is a powerful Library for displaying math in webpages. It is possible to write mathematical symbols and equations with MathML syntatax or LateX syntax, and even other formats. In this article, LateX will be used. LaTeX has got all the necessary support for writing mathematical symbols and equations, note though that this does not mean everything in LateX is supported in browsers through MathJax. In this article, only simple examples will be used. First off, to use MathJax, just add a Reference to the MathJax JavaScript Library in the <HEAD>HEAD section of Your HTML page:

<html>
<head>
<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  }
});

</script>

</head>

Now we are ready to insert some mathematical symbols and Equations on our web page!
Let's first add the Quadratic Equation:

<font size="+2">
Quadratic equation:

$$ \begin{array}{*{20}c} { x = \frac{ -b \pm \sqrt {b^2 - 4ac}}{2a} } & {{\rm{when}}} & {ax^2 + bx + c = 0} \\ \end{array} $$ </font>

And let us also list the Greek alphabet: <div style="color:charcoal;width:300px;background:white"> <font size="+2"> $$ \\ Greek \hspace{2mm} Alphabet. \\ letter - small symbol - large symbol \\ alpha \hspace{1mm} \alpha \hspace{2mm} A \hspace{2mm} \cdotp beta \hspace{1mm} \beta \hspace{2mm} B \hspace{2mm} \cdotp gamma \hspace{1mm} \gamma \hspace{2mm} \Gamma \hspace{2mm} \cdotp delta \hspace{1mm} \delta \hspace{2mm} \Delta \hspace{2mm} \cdotp epsilon \hspace{1mm} \epsilon \hspace{2mm} E \hspace{2mm} \cdotp zeta \hspace{1mm} \zeta \hspace{2mm} Z \hspace{2mm} \cdotp \\ eta \hspace{1mm} \eta \hspace{2mm} H \hspace{2mm} \cdotp theta \hspace{1mm} \theta \hspace{2mm} \Theta \hspace{2mm} \cdotp iota \hspace{1mm} \iota \hspace{2mm} I \hspace{2mm} \cdotp kappa \hspace{1mm} \kappa \hspace{2mm} K \hspace{2mm} \cdotp lambda \hspace{1mm} \lambda \hspace{2mm} \Lambda \hspace{2mm} \cdotp mu \hspace{1mm} \mu \hspace{2mm} M \hspace{2mm} \cdotp nu \hspace{1mm} \nu \hspace{2mm} N \hspace{2mm} \cdotp xi \hspace{1mm} \xi \hspace{2mm} \Xi \hspace{2mm} \cdotp omicron \hspace{1mm} \omicron \hspace{2mm} O \hspace{2mm} \cdotp \\ pi \hspace{1mm} \pi \hspace{2mm} \Pi \hspace{2mm} \cdotp rho \hspace{1mm} \rho \hspace{2mm} P \hspace{2mm} \cdotp sigma \hspace{1mm} \sigma \hspace{2mm} \Sigma \hspace{2mm} \cdotp tau \hspace{1mm} \tau \hspace{2mm} T \hspace{2mm} \cdotp upsilon \hspace{1mm} \upsilon \hspace{2mm} Y \hspace{2mm} \cdotp phi \hspace{1mm} \phi \hspace{2mm} \Phi \hspace{2mm} \cdotp chi \hspace{1mm} \chi \hspace{2mm} X \hspace{2mm} \cdotp psi \hspace{1mm} \psi \hspace{2mm} \Psi \hspace{2mm} \cdotp omega \hspace{1mm} \omega \hspace{2mm} \Omega \hspace{2mm} \cdotp $$ </font> </div>
As you have noted, we use the $$ .. $$ enclosing syntax to insert our LateX code that constitute the mathematical symbols and Equations. MathJax is really powerful! You can display triple integrals, matrices and vector Equations - both elementary, Intermediate and Advanced Math can be displayed on a web page. The web site of MathJax is available here: MathJax webiste - MathJax.org Ok, so how does the code above look like?


Displayed in IFRAME next - the source is: http://toreaurstad.ddns.net/website/index2.htm

Share this article on LinkedIn.

No comments:

Post a Comment