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

tex
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##
\begin{document}
Hello world!
\end{document}
comment % comment
text style
tex
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:
\documentclass[12pt]{report}

Set font size for paragraph:
\begin{Large}
Lorem ipsum dolor sit amet
\end{Large}

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

Font size names:
\Huge
\huge
\LARGE
\Large
\large
\normalsize
\small
\footnotesize
\scriptsize
\tiny
non-ascii punctuation
tex
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
tex
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
Centered
}
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
  \begin{itemize}
  \item sublist item
  \end{itemize}
\end{itemize}
numbered list item \begin{enumerate}
\item numbered one
\item numbered two
\end{enumerate}
definition list \begin{description}
\item[one] the 1st cardinal
\item[two] the 2nd cardinal
\end{description}
block quote \begin{quote}
Four score and twenty years ago…
\end{quote}
tables, code, and math
tex
table \begin{tabular}{l l}
A & B \\
\hline
1 & 2 \\
3 & 4 \\
\end{tabular}
pre-formatted fixed-width block with no need to escape markup or < and & \begin{verbatim}
int add(int a, int b) {
  return (a+b);
}
\end{verbatim}
inline math \( \int_0^\infty \frac{1}{x^2} dx \)

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

\begin{displaymath}
\int_0^\infty \frac{1}{x^2} dx
\end{displaymath}
________________ __________________________________________________
latex
$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
latex
$\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
latex
≤ ≥ \le \ge
\neq
$\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
latex
\emptyset
∈ ∉ \in \notin
⊂ ⊆ \subset \subseteq
⊄ ⊈ \not\subset \not\subseteq
⊊ ⊋ \subsetneq \supsetneq
⊃ ⊇ \supset \supseteq
$\cup \cap$ \cup \cap
$\bigcup$ \bigcup
$\bigcap$ \bigcap
\setminus
א \aleph
¬ \neq
∧ ∨ \wedge \vee
\veebar
∀ ∃ \forall \exists
⊤ ⊥ \top \bot
\therefore
⊢ ⊨ \vdash \models
\blacksquare
geometry
latex
$\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
analysis
latex
$\begin{cases}x & x \ge 0 \\ -x & x < 0 \end{cases}$ \begin{cases}
x & x \ge 0 \\
-x & x < 0
\end{cases}
$\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)}
\infty
$\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
matrices
latex
$\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
\end{matrix}
algebra
latex
$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
arrows
latex
$\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
\rightarrowtail
\twoheadrightarrow
\hookrightarrow
accents
latex
$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
latex
Α α \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
fonts
latex
roman \textrm{roman}
\mathrm{roman}
italic \textit{italic}
\mathit{italic}
bold \textbf{bold}
\mathbf{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}




\mathbb{N}
\mathbb{Z}
\mathbb{Q}
\mathbb{R}
\mathbb{C}
$\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}

LaTeX

to HTML:

$ pandoc foo.txt -o foo.html

to PDF:

$ pdflatex foo.tex

MathJax

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"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

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

<p>
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>
<p>
Centered Math:
 
<div class="latex">
\frac{1+x}{1+y}
</div>

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() ) {
      LATEX.replace_div(element);
    }
    else if ( "span" == element.tagName.toLowerCase() ) {
      LATEX.replace_span(element);
    }
  }
};
 
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));
  p.appendChild(img);  
  element.parentNode.replaceChild(p, element);
};
 
LATEX.process();
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License