15,969,509 members
Articles / Programming Languages / LaTeX
Tip/Trick

# Using LaTeX in articles on CodeProject

Rate me:
10 Jun 2014CPOL2 min read 26.5K   24   11
A brief intro to using LaTeX in your articles

## Introduction

The development of the MathJax javascript library has dragged us kicking and screaming out of the dark days of ASCII math1.  Gone are the days when n = n^2 is acceptable because it's just as easy to write $n = n^2$.

## Using MathJax in your articles

Enclose your mathematics within a tag of class "math" and use $...$ to wrap equation blocks and  $...$ to wrap inline equations.  eg <div class="math">$...$</div> to wrap a block of equations, or <span class="math">$...$</span> for an inline equation.

View the MathJax Tex/LaTeX pages for information on the commands supported.

You also may find it handy to use this online LatTeX editor: http://www.codecogs.com/latex/eqneditor.php. There are a few useful items here:

1. It is an easy way to find the particular syntax you need
2. If you notice your formula is not rendering properly in the preview you can paste it into here for review. It will tell you, for example, "you have too many unclosed {"

## Examples

Some quick examples taken directly from the MathJax pages (but adapted to our implementation) to get you started.

#### The Lorenz Equations

HTML
<div class="math">\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}</div>

becomes

\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}

#### The Cauchy-Schwarz Inequality

HTML
<div class="math">$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$</div>

becomes

$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$

#### A Cross Product Formula

HTML
<div class="math">$\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}$</div>

becomes

$\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}$
HTML
<p>The probability of getting <span class="math">(k)</span> heads when flipping <span class="math">(n)</span> coins is</p>

becomes

The probability of getting (k) heads when flipping (n) coins is

HTML
<div class="math">$P(E) = {n \choose k} p^k (1-p)^{ n-k}$</div>

becomes

$P(E) = {n \choose k} p^k (1-p)^{ n-k}$

#### An Identity of Ramanujan

HTML
<div class="math">$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }$</div>
$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }$

#### A Rogers-Ramanujan Identity

HTML
<div class="math">$1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for$|q|<1$}.$</div>

becomes

$1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for$|q|<1$}.$

#### Maxwell’s Equations

HTML
<div class="math">\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}</div>
\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}

1 Actually, MathJax supports ASCIIMath too.

Written By
Founder CodeProject
Chris Maunder is the co-founder of CodeProject and ContentLab.com, and has been a prominent figure in the software development community for nearly 30 years. Hailing from Australia, Chris has a background in Mathematics, Astrophysics, Environmental Engineering and Defence Research. His programming endeavours span everything from FORTRAN on Super Computers, C++/MFC on Windows, through to to high-load .NET web applications and Python AI applications on everything from macOS to a Raspberry Pi. Chris is a full-stack developer who is as comfortable with SQL as he is with CSS.

In the late 1990s, he and his business partner David Cunningham recognized the need for a platform that would facilitate knowledge-sharing among developers, leading to the establishment of CodeProject.com in 1999. Chris's expertise in programming and his passion for fostering a collaborative environment have played a pivotal role in the success of CodeProject.com. Over the years, the website has grown into a vibrant community where programmers worldwide can connect, exchange ideas, and find solutions to coding challenges. Chris is a prolific contributor to the developer community through his articles and tutorials, and his latest passion project, CodeProject.AI.

In addition to his work with CodeProject.com, Chris co-founded ContentLab and DeveloperMedia, two projects focussed on helping companies make their Software Projects a success. Chris's roles included Product Development, Content Creation, Client Satisfaction and Systems Automation.

 First Prev Next
 greate article, greate LaTex szcathay29-Jun-15 17:09 szcathay 29-Jun-15 17:09
 $1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for$|q|<1$}.$
 great news BillW3311-Jun-14 6:25 BillW33 11-Jun-14 6:25
 Needs enabled on the rest of the site Dan Neely11-Jun-14 3:08 Dan Neely 11-Jun-14 3:08
 Re: Needs enabled on the rest of the site BillW3311-Jun-14 6:22 BillW33 11-Jun-14 6:22
 My vote of 5 CPallini11-Jun-14 2:34 CPallini 11-Jun-14 2:34
 Latex Cheat Sheet DaveAuld11-Jun-14 1:41 DaveAuld 11-Jun-14 1:41
 Cool stuff! Shao Voon Wong10-Jun-14 17:20 Shao Voon Wong 10-Jun-14 17:20
 Typo Matt T Heffron10-Jun-14 11:00 Matt T Heffron 10-Jun-14 11:00
 Re: Typo Chris Maunder10-Jun-14 11:04 Chris Maunder 10-Jun-14 11:04
 YEEEEEES! Kenneth Haugland10-Jun-14 9:20 Kenneth Haugland 10-Jun-14 9:20
 my vote of 4 LLLLGGGG10-Jun-14 8:32 LLLLGGGG 10-Jun-14 8:32
 Last Visit: 31-Dec-99 18:00     Last Update: 15-Aug-24 15:58 Refresh 1