TeX and LaTeX

markup: text style | non-ascii punctuation | grouping and alignment | tables, code, and mathpsp

mathematical notation: general | fractions and radicals | relations and operators | sets and logic | geometry | analysis | matrices | algebra | arrows | accents | greek letters | fonts

typesetting math: latex | mathjax | google charts

sandbox https://www.latex-tutorial.com/sandbox/
command line tool $ sudo apt-get install texlive-full
$ pdflatex

On Mac, install http://www.tug.org/mactex/.

Then find pdflatex in what gets installed and place a link to it in your search path.
hello world \documentclass{article}
gray|% \usepackage statements go here##
Hello world!
comment % comment
text style
italic text \emph{italic text}
\textit{italic text}
bold text \textbf{bold text}
small caps text \textsc{small caps text}
fixed width text \texttt{fixed width text}
underlined text \underline{underlined text}
striketrhough text \usepackage{ulem}

\sout{strikethrough text}
literal text textbackslash{}emph\{not italics\}

special characters:
# $ % ^ & _ { } ~ \

how to escape:
\# \$ \% \textasciicircum{} \& \_ \{ \} \~{ } \textbackslash{}
superscript2 superscript\textsuperscript{2}
subscript2 subscript\textsubscript{2}
font color \usepackage{color}

\textcolor{red}{red text}
font size Set font size for document:

Set font size for paragraph:
Lorem ipsum dolor sit amet

Set font size inline:
{\Large Lorem ipsum\par} dolor sit amet

Font size names:
non-ascii punctuation
right and left single quotes: ‘lorem ipsum’ `lorem ipsum'
right and left double quotes: “lorem ipsum” ``lorem ipsum''
en dash: --
em dash: ---
ellipsis: … \ldots
grouping and alignment
paragraphs Separate paragraphs with an empty line:
This is paragraph 1.

This is paragraph 2.
line break \\
horizontal rule \hrulefill
horizontal dots \dotfill
align left {\flushleft
Left aligned
align right {\flushright
Right aligned
align center {\center
document title \title{document title}
section header \section{section header}
subsection header \subsection{subsection header}
subsubsection header \subsubsection{subsubsection header}
list item \begin{itemize}
\item list item
  \item sublist item
numbered list item \begin{enumerate}
\item numbered one
\item numbered two
definition list \begin{description}
\item[one] the 1st cardinal
\item[two] the 2nd cardinal
block quote \begin{quote}
Four score and twenty years ago…
tables, code, and math
table \begin{tabular}{l l}
A & B \\
1 & 2 \\
3 & 4 \\
pre-formatted fixed-width block with no need to escape markup or < and & \begin{verbatim}
int add(int a, int b) {
  return (a+b);
inline math \( \int_0^\infty \frac{1}{x^2} dx \)

\int_0^\infty \frac{1}{x^2} dx
block math \[ \int_0^\infty \frac{1}{x^2} dx \]

\int_0^\infty \frac{1}{x^2} dx
________________ __________________________________________________
$x^2$ x^2
$x_2$ x_2
90° 90^\circ
$( \big( \Big( \bigg( \Bigg($ ( \big( \Big( \bigg( \Bigg(
spaces of decreasing width \; \: \, \!
$\binom{n}{k}$ \binom{n}{k}
$\Re(z) \;\; \Im(z)$ \Re(z) \Im(z)
fractions and radicals
$\frac{x+1}{y+1}$ \frac{x+1}{y+1}
$^3/_7$ ^3/_7
$\left( \frac{x+1}{y+1} \right)$ \left( \frac{x+1}{y+1} \right)
$\left| \frac{x}{1+x} \right|$ \left| \frac{x}{1+x} \right|
$\sqrt{2}$ \sqrt{2}
$\sqrt[3]{x}$ \sqrt[3]{x}
relations and operators
≤ ≥ \le \ge
$\approx \;\; \not\approx$ \approx \not\approx
$\simeq \;\; \cong$ \simeq \cong
$\equiv \;\; \not\equiv$ \equiv \not\equiv
± ∓ \pm \mp
× ÷ \times \div
$\mathbf{a} \cdot \mathbf{b}$ \mathbf{a} \cdot \mathbf{b}
$(g \circ f)'(t) = g'(f(t))\;f'(t)$ (g \circ f)'(t) = g'(f(t)) f'(t)
≮ ≯ \not< \not>
≰ ≱ \not\le \not\ge
sets and logic
∈ ∉ \in \notin
⊂ ⊆ \subset \subseteq
⊄ ⊈ \not\subset \not\subseteq
⊊ ⊋ \subsetneq \supsetneq
⊃ ⊇ \supset \supseteq
$\cup \cap$ \cup \cap
$\bigcup$ \bigcup
$\bigcap$ \bigcap
א \aleph
¬ \neq
∧ ∨ \wedge \vee
∀ ∃ \forall \exists
⊤ ⊥ \top \bot
⊢ ⊨ \vdash \models
$\overline{AB}$ \overline{AB}
$\overrightarrow{AB}$ \overrightarrow{AB}
$\overleftrightarrow{AB}$ \overleftrightarrow{AB}
$\angle ABC$ \angle ABC
$\triangle ABC$ \triangle ABC
$\overline{AB} \perp \overline{XY}$ \overline{AB} \perp \overline{XY}
$\overline{AB} \parallel \overline{XY}$ \overline{AB} \parallel \overline{XY}
$\triangle ABC \cong \triangle XYZ$ \triangle ABC \cong \triangle XYZ
$\triangle ABC \sim \triangle XYZ$ \triangle ABC \sim \triangle XYZ
$\begin{cases}x & x \ge 0 \\ -x & x < 0 \end{cases}$ \begin{cases}
x & x \ge 0 \\
-x & x < 0
$\lfloor x \rfloor$ \lfloor x \rfloor
$\lceil x \rceil$ \lceil x \rceil
$\|x\|$ \|x\|
$\langle x, y \rangle$ \langle x, y \rangle
$\frac{1}{\widehat{f(x)}}$ \widehat{f(x)}
$\Delta x$ \Delta x
$\nabla f\:(x, y, z)$ \nabla f(x, y, z)
$\frac{\partial f}{\partial x}$ \frac{\partial f}{\partial x}
$\sum_{i=1}^n i$ \sum_{i=1}^n i
$\prod_{i=1}^n i$ \prod_{i=1}^n i
${\displaystyle \lim_{h \to 0} \frac{f(x+h) - f(x)}{h} }$ \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}
$\int_0^{2\pi}\cos x\,dx$ \int_0^{2\pi}\cos x\,dx
$\cos x |_{x=\pi}$ \cos x |_{x=\pi}
$\oint_C \frac{1}{z} dz$ \oint_C \frac{1}{z} dz
$\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix}$ \begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix}
$\begin{array}{c|c} 1 & 2 \\ 3 & 4 \end{array}$ \begin{array}{c|c} 1 & 2 \\ 3 & 4 \end{array}
$\begin{array}{cc} 1 & 2 \\ \hline 3 & 4 \end{array}$ \begin{array}{cc} 1 & 2 \\ \hline 3 & 4 \end{array}
$\begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix}$ \begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix}
$\begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix}$ \begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix}
$\begin{matrix} 0 & \cdots & 0 \\ \vdots & \ddots & \vdots \\ 0 & \cdots & 0 \end{matrix}$ \begin{matrix}
0 & \cdots & 0 \\
\vdots & \ddots & \vdots \\
0 & \cdots & 0
$p \not|\; p + 1$ p \not| p + 1
$\oplus \otimes$ \oplus \otimes
$\bigoplus \bigotimes$ \bigoplus \bigotimes
$N \triangleleft G$

$N \unlhd G$
N \triangleleft G
N \unlhd G
$H\; \rtimes_\phi \;K$ H \rtimes_\phi K
$L \wr K$ L \wr K
$\rightarrow \leftarrow \uparrow \downarrow$ \rightarrow \leftarrow \uparrow \downarrow
↖↗↘↙ \nwarrow \nearrow \searrow \swarrow
$\Rightarrow \Leftarrow \Uparrow \Downarrow$ \Rightarrow \Leftarrow \Uparrow \Downarrow
$\mapsto$ \mapsto
$\leftrightarrow$ \leftrightarrow
$\Leftrightarrow$ \Leftrightarrow
$x' \; x'' \; x'''$ x' x'' x'''
$\hat{x}$ \hat{x}
$\bar{x}$ \bar{x}
$\vec{x}$ \vec{x}
$\tilde{x}$ \tilde{x}
$\dot{x}$ \dot{x}
$\ddot{x}$ \ddot{x}
greek letters
Α α \Alpha \alpha
Β β \Beta \beta
Γ γ \Gamma \gamma
Δ δ \Delta \delta
Ε ε \Epsilon \epsilon
Ζ ζ \Zeta \zeta
Η η \Eta \eta
Θ θ \Theta \theta
Ι ι \Iota \iota
Κ κ \Kappa \kappa
Λ λ \Lambda \lambda
Μ μ \Mu \mu
Ν ν \Nu \nu
Ξ ξ \Xi \xi
Ο ο \Omicron \omicron
Π π \Pi \pi
Ρ ρ \Rho \rho
Σ σ \Sigma \sigma
Τ τ \Tau \tau
Υ υ \Upsilon \upsilon
Φ φ \Phi \phi
Χ χ \Chi \chi
Ψ ψ \Psi \psi
Ω ω \Omega \omega
roman \textrm{roman}
italic \textit{italic}
bold \textbf{bold}
fixed width \texttt{fixed width}
\mathtt{fixed width}
predefined color \usepackage{color}
\textcolor {blue}{blue text}
RGB color \usepackage{color}
\textcolor [rgb]{1,0,0}{red text}

$\mathcal{A, B, C, \ldots}$
$\mathcal{a, b, c, \ldots}$
\mathcal{A, B, C, \ldots}
\mathcal{a, b, c, \ldots}
$\mathfrak{A, B, C, \ldots}$
$\mathfrak{a, b, c, \ldots}$
\mathfrak{A, B, C, \ldots}
\mathfrak{a, b, c, \ldots}


to HTML:

$ pandoc foo.txt -o foo.html

to PDF:

$ pdflatex foo.tex


MathJax is a JavaScript solution for putting LaTeX into HTML. The necessary JavaScript file is hosted at mathjax.org. Here is an example of how to use it:

<script type="text/javascript"

The Greeks observed that \( \sqrt{2} \) cannot be expressed as a rational number.

Moreover, they knew that for a right triangle with hypotenuse <em>c</em>:

$$ c^2 = a^2 + b^2 $$

Google Charts

Google Charts

The feature is undocumented, but it is possible to send a GET request with url encoded LaTeX to the Google Charts API and get a PNG in return. Thus HTML like this is possible:

<img src="http://chart.apis.google.com/chart?cht=tx&chl=URLENCODED_LATEX"/>

Url encoded LaTeX is unmaintainable, however. A better approach might use HTML like this:

Inline Math: <span class="latex">\int_0^\infty \cos x dx</span>
Centered Math:
<div class="latex">

The above HTML must be processed by the following JavaScript, which should be put in the document after the tags it needs to process:

var LATEX = {};
LATEX.url = "http://chart.apis.google.com/chart?cht=tx&chl=";
LATEX.process = function() {
  elements = document.getElementsByClassName("latex");
  for (var i=0; i<elements.length; i++ ) {
    element = elements[i];
    if ( "div" == element.tagName.toLowerCase() ) {
    else if ( "span" == element.tagName.toLowerCase() ) {
LATEX.replace_span = function(element) {
  img = document.createElement('img');
  img.setAttribute('src', LATEX.url + encodeURIComponent(element.innerHTML));
  img.setAttribute('class', 'latex');
  img.setAttribute('style', 'vertical-align: bottom');
  element.parentNode.replaceChild(img, element)
LATEX.replace_div = function(element) {
  p = document.createElement('p');
  p.setAttribute('class', 'latex');
  p.setAttribute('style', 'text-align: center');
  img = document.createElement('img');
  img.setAttribute('src', LATEX.url + encodeURIComponent(element.innerHTML));
  element.parentNode.replaceChild(p, element);
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License