Click here to Skip to main content
15,867,749 members
Articles / Programming Languages / LaTeX
Tip/Trick

Using LaTeX in articles on CodeProject

Rate me:
Please Sign up or sign in to vote.
4.98/5 (26 votes)
10 Jun 2014CPOL2 min read 25.4K   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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder CodeProject
Canada Canada
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.

Comments and Discussions

 
Generalgreate article, greate LaTex Pin
szcathay29-Jun-15 17:09
szcathay29-Jun-15 17:09 
Questiongreat news Pin
BillW3311-Jun-14 6:25
professionalBillW3311-Jun-14 6:25 
QuestionNeeds enabled on the rest of the site Pin
Dan Neely11-Jun-14 3:08
Dan Neely11-Jun-14 3:08 
AnswerRe: Needs enabled on the rest of the site Pin
BillW3311-Jun-14 6:22
professionalBillW3311-Jun-14 6:22 
GeneralMy vote of 5 Pin
CPallini11-Jun-14 2:34
mveCPallini11-Jun-14 2:34 
SuggestionLatex Cheat Sheet Pin
DaveAuld11-Jun-14 1:41
professionalDaveAuld11-Jun-14 1:41 
http://www.stdout.org/~winston/latex/latexsheet-a4.pdf[^]

I have used this cheat sheet previously, as mentioned in my tip here: Google Charting API and Formula Imaging[^]


Now I'll need to add the following article to make use of this, heavily uses ascii math and image formulae!
Data Historians - You Bought It, Use It! Real World Example[^]
GeneralCool stuff! Pin
Shao Voon Wong10-Jun-14 17:20
mvaShao Voon Wong10-Jun-14 17:20 
BugTypo Pin
Matt T Heffron10-Jun-14 11:00
professionalMatt T Heffron10-Jun-14 11:00 
GeneralRe: Typo Pin
Chris Maunder10-Jun-14 11:04
cofounderChris Maunder10-Jun-14 11:04 
QuestionYEEEEEES! Pin
Kenneth Haugland10-Jun-14 9:20
mvaKenneth Haugland10-Jun-14 9:20 
Generalmy vote of 4 Pin
LLLLGGGG10-Jun-14 8:32
LLLLGGGG10-Jun-14 8:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.