Markup Language Cheat Sheets

Markup language cheat sheets for 4 languages.

Single Line Examples

UFL: Title [set webpage title (or pdf title), 'my title'] BBCode: [non-standard: [title]my title[/title]] HTML: <title>my title</title> LaTeX: \hypersetup{pdftitle={my title2},pdfdisplaydoctitle=true} [note: must be set in the preamble] [requires (hypersetup): \usepackage{hyperref}] Markdown: <title>my title</title> [note: not guaranteed to work] UFL: SymComment [single-line comment][see also: SymCommentMult] BBCode: [none] [workaround: [url="my comment"][/url]] [non-standard: [comment]my comment[/comment]] HTML: <!--my comment--> [note: a comment can be the first 'tag'/node after '<!DOCTYPE html>'] LaTeX: % my comment Markdown: <!--my comment--> [workaround: [//]: # (my comment)] [workaround: [comment]: # (my comment)] UFL: TextBold [bold text, 'my text'] BBCode: [b]my text[/b] HTML: <strong>my text</strong> [also: <b>my text</b>] [e.g. b tag: my text] [e.g. strong tag: my text] LaTeX: \textbf{my text} Markdown: **my text** [also: __my text__] UFL: TextItalics [italic text, 'my text'] BBCode: [i]my Text[/i] HTML: <i>my text</i> [also: <em>my text</em>] [e.g. i tag: my text] [e.g. em tag: my text] LaTeX: \textit{my text} Markdown: *my text* [also: _my text_] UFL: TextUnderline [underlined text, 'my text'] BBCode: [u]my text[/u] HTML: <u>my text</u> [e.g. u tag: my text] LaTeX: \underline{my text} Markdown: <u>my text</u> UFL: TextBoldItalics [bold italic text, 'my text'] BBCode: [b][i]my text[/i][/b] HTML: <b><i>my text</i></b> [e.g. b/i tags: text] LaTeX: \textbf{\textit{my text}} Markdown: ***my text*** UFL: TextBoldItalicsUnderline [bold italic underlined text, 'my text'] BBCode: [b][i][u]my text[/u][/i][/b] HTML: <b><i><u>text</u></i></b> [e.g. b/i/u tags: text] LaTeX: \underline{\textbf{\textit{my text}}} Markdown: ***<u>my text</u>*** UFL: TextStrikethrough [strikethrough text, 'my text'] BBCode: [s]my text[/s] HTML: <del>my text</del> [e.g. my text] LaTeX: \sout{my text} [requires (sout): \usepackage{ulem}] Markdown: <del>my text</del> [e.g. non-standard: ~~my text~~] UFL: TextSuperscript [superscript text, 'x2' (x squared)] BBCode: [sup]my text[/sup] HTML: x<sup>2</sup> [e.g. x2] LaTeX: $x^{2}$ Markdown: x<sup>2</sup> UFL: TextSubscript [subscript text, 'H2O' (water)] BBCode: [sub]my text[/sub] HTML: H<sub>2</sub>O [e.g. H2O] LaTeX: $H_{2}O$ Markdown: H<sub>2</sub>O UFL: TextCode [or LineCode][one line of code, 'my code'][see also: BlockCode] BBCode: [none] [non-standard: [c]my code[/c]] HTML: <pre>my code</pre> LaTeX: \texttt{my code} Markdown: `my code` UFL: KeyboardKey [display a keyboard key in a small box, 'Ctrl'] BBCode: [non-standard: [key]Ctrl[/key]] HTML: [none] [e.g. custom tag: <kbd>Ctrl</kbd>] [note: code for a custom 'kbd' tag: markdown - How to insert the SO-like effect into my HTML-based presentation? - Stack Overflow] LaTeX: \fbox{Ctrl} Markdown: <kbd>Ctrl</kbd> UFL: TextColor [or TextFontColour][coloured text, 'my text', e.g. red] BBCode: [color=red]my text[/color] [color=#FF0000]my text[/color] HTML: <span style="color:red;">my text</span> LaTeX: \textcolor{red}{my text} [requires (textcolor): \usepackage{xcolor}] Markdown: <span style="color:red;">my text</span> UFL: TextSize [text of a specific size, 'my text', e.g. size 12] BBCode: [size=12]my text[/size] HTML: <span style="font-size:12px;">my text</span> LaTeX: {\fontsize{12}{14}\selectfont my text} [params: size, baselineskip (line spacing)] Markdown: <span style="font-size:12px;">my text</span> UFL: TextSpoiler [text hidden by a spoiler (that can be revealed), 'my text'] BBCode: [non-standard: [spoiler]my text[/spoiler]] HTML: <details><summary>my spoiler</summary>my text</details> [also (inline): <details style="display:inline;"><summary>my spoiler</summary>my text</details>] [e.g. text appears/disappears when click] LaTeX: \colorbox{black}{\textcolor{black}{my text}} [e.g. text is black, select/copy/paste to reveal] [requires (colorbox/textcolor): \usepackage{xcolor}] Markdown: <details><summary>my spoiler</summary>my text</details> [also (inline): <details style="display:inline;"><summary>my spoiler</summary>my text</details>] [e.g. text appears/disappears when click] UFL: TextLeft [left-aligned text, 'my text'] BBCode: [non-standard: [left]my text[/left]] HTML: <div style="text-align:left;">my text</div> [note: the 'style' attribute (e.g. style="text-align:left;") is preferred to the deprecated 'align' attribute (e.g. align="left")] LaTeX: \noindent\raggedright my text Markdown: <div style="text-align:left;">my text</div> UFL: TextCenter [or TextCentre][centre-aligned text, 'my text'] BBCode: [center]my text[/center] HTML: <div style="text-align:center;">my text</div> LaTeX: \centerline{my text} Markdown: <div style="text-align:center;">my text</div> UFL: TextRight [right-aligned text, 'my text'] BBCode: [non-standard: [right]my text[/right]] HTML: <div style="text-align:right;">my text</div> LaTeX: \hfill my text Markdown: <div style="text-align:right;">my text</div> UFL: TextJustify [justified text, 'my text'] BBCode: [non-standard: [justify]my text[/justify]] HTML: <div style="text-align:justify;">my text</div> LaTeX: \noindent my text Markdown: <div style="text-align:justify;">my text</div> UFL: HyperlinkUrlOnly [or AnchorTextUrlOnly/UrlRaw][anchor text, with an anchor link, that points to URL, the text is the URL] BBCode: [url]my_url[/url] [e.g. [url]https://www.google.com[/url]] HTML: <a href="my_url">my_url</a> [e.g. <a href="https://www.google.com">https://www.google.com</a>] [e.g. https://www.google.com] [note: anchor tags] LaTeX: \url{https://example.com} [requires (url): \usepackage{hyperref}] Markdown: <my_url> [also: [my_url](my_url)] [e.g. <https://www.google.com>] [e.g. [https://www.google.com](https://www.google.com)] UFL: HyperlinkTitleUrl [or AnchorTextTitleUrl/TitleAndUrl][anchor text, with an anchor link, that points to a URL] BBCode: [url=my_url]my title[/url] [e.g. [url=https://www.google.com]Google[/url]] HTML: <a href="my title">my_url</a> [e.g. <a href="https://www.google.com">Google</a>] [e.g. Google] [note: anchor tags] LaTeX: \href{my_url}{my title} [e.g. \href{https://www.google.com}{Google}] [requires (href): \usepackage{hyperref}] Markdown: [my title](my_url) [e.g. [Google](https://www.google.com)] UFL: HyperlinkLocal [or AnchorTextLocal][anchor text, with an anchor link, that points to a location on the page] BBCode: [url=#my_id]my title[/url] HTML: <a href="#my_id">my title</a> [e.g. my span] [note: anchor tags] LaTeX: \nameref{my_id} [also: \ref{my_id}] [also: \autoref{my_id}] [requires (autoref/nameref): \usepackage{hyperref}] Markdown: [my title](#my_id) UFL: Hypertarget [or AnchorLink][a jump-to point on the page] BBCode: [non-standard: [anchor]my_id[/anchor]] [non-standard: [section=my_id]my title[/section]] [non-standard: [section id=my_id]my title[/section]] HTML: <h2 id="my_id">My Header Text</h2> [e.g. my span] [deprecated: 'name' can be used instead of 'id' for 'a' tags] LaTeX: \label{my_id} Markdown: e.g. [My Header](#my-header) [this links to ## My Header] [note: not guaranteed to work] UFL: Barrier [horizontal rule] BBCode: [non-standard: [hr]] [non-standard: [rule]] [non-standard: [line]] HTML: <hr> LaTeX: \hrule Markdown: [none] [can use (mimic the horizontal rule in an h1/h2 tag): <hr style="height:1px;background-color:#d1d9e0b3;"> UFL: Header [header, 'my header text'] BBCode: [non-standard: [h1]my header text[/h1]] HTML: <h1>my header text</h1> [note: h1/h2/h3/h4/h5/h6 tags] LaTeX: \section*{my header text} Markdown: # my header text [note: equivalent to h1 tag] [note: h1/h2/h3/h4/h5/h6: # ## ### #### ##### ######] [WARNING: h1/h2 tags often come with a horizontal rule] UFL: StringLinefeed [linefeed character] BBCode: [non-standard: [br]] HTML: <br> LaTeX: \\ [also: \newline] [also: ~\\] Markdown: double space (2 space chars) [also: trailing backslash] UFL: StringSpaceTrailing [trailing space, e.g. show a line that ends with a space (or non-breaking space)] BBCode: [can use: char 160, it will resolve to space (char 32)] [non-standard: [space]] [non-standard: [sp]] [non-standard: [nbsp]] HTML: &nbsp; LaTeX: [none] Markdown: &nbsp; UFL: StringLessThan [less-than sign] BBCode: < [non-standard: [lt]] HTML: &lt; [note: character entity] LaTeX: \textless Markdown: \&lt; UFL: StringGreaterThan [greater-than sign] BBCode: > [non-standard: [gt]] HTML: &gt; [note: character entity] LaTeX: \textgreater Markdown: \&gt; UFL: StringSquareBracketOpen [open square bracket] BBCode: [none] [can use: e.g. [noparse][b]my text[/b][/noparse]] [also: e.g. [code][b]my text[/b][/code]] [also: 'break' tag e.g. [[i][/i]b]my text[[i][/i]/b]] HTML: [ [also (character entity): &lsqb;] LaTeX: [ Markdown: [ UFL: StringSquareBracketClose [close square bracket] BBCode: [none] [can use: e.g. [noparse][b]my text[/b][/noparse]] [also: e.g. [code][b]my text[/b][/code]] [also: 'break' tag e.g. [[i][/i]b]my text[[i][/i]/b]] HTML: ] [also (character entity): &rsqb;] LaTeX: ] Markdown: ] UFL: StringUnderscore [underscore] BBCode: _ HTML: &lowbar; [note: character entity] LaTeX: \_ Markdown: \_ [also: &lowbar;] UFL: StringAsterisk [asterisk (star)] BBCode: * HTML: &ast; [note: character entity] LaTeX: $*$ [also: $\ast$] Markdown: \* [also: &ast;] UFL: StringBackslash [backslash] BBCode: \ HTML: \ [also (character entity): &bsol;] LaTeX: \textbackslash Markdown: \\ UFL: StringBacktick [or StringGrave][backtick (grave) character] BBCode: ` HTML: ` [also (character entity): &grave;] LaTeX: \textasciigrave Markdown: \` UFL: StringSingleApos [apostrophe, char 39] BBCode: ' HTML: ' [also (character entity): &apos;] LaTeX: [none] Markdown: ' UFL: StringSingleQuoteLeft [left single quote, char 8216] BBCode: ‘ HTML: ‘ LaTeX: ` [note: backtick to get char 8216] Markdown: ‘ UFL: StringSingleQuoteRight [right single quote, char 8217] BBCode: ’ HTML: ’ LaTeX: ' [note: apostrophe to get char 8217 (or math mode: char 8242)] Markdown: ’ UFL: StringDoubleQuote [double quote, char 34] BBCode: " HTML: " [also (character entity): &quot;] LaTeX: [none] Markdown: " UFL: StringDoubleQuoteLeft [left double quote, char 8220] BBCode: “ HTML: “ LaTeX: `` [note: two backticks to get char 8220] Markdown: “ UFL: StringDoubleQuoteRight [right double quote, char 8221] BBCode: ” HTML: ” LaTeX: " [note: one char 34 to get char 8221] [also: two apostrophes to get char 8221 (or math mode: get two of char 8242)] Markdown: ” UFL: Email [a link to an email address, e.g. 'user@example.com'][note: example.com is reserved by IANA, so won't have a real person's email address] BBCode: [email]user@example.com[/email] HTML: <a href="mailto:user@example.com">user@example.com</a> LaTeX: \href{mailto:user@example.com}{user@example.com} [requires (href): \usepackage{hyperref}] Markdown: <user@example.com> [also: [user@example.com](mailto:user@example.com)] UFL: Image [display an image based on a URL, e.g. 'https://www.google.com/favicon.ico' (with alt text, 'my alt text', and tooltip text, 'my tooltip text', if available)] BBCode: [img]https://www.google.com/favicon.ico[/img] [non-standard: [img alt="my alt text" title="my tooltip text"]https://www.google.com/favicon.ico[/img]] HTML: <img src="https://www.google.com/favicon.ico" alt="my alt text" title="my tooltip text"> [also: canvas tag, svg tag] LaTeX: \includegraphics[alt={my alt text}]{https://www.google.com/favicon.ico} [requires (graphicx): \usepackage{graphicx}] [note: external URLs, and alt/tooltip text are not available by default] Markdown: ![my alt text](https://www.google.com/favicon.ico "my tooltip text") UFL: Equation [the quadratic equation] BBCode: [non-standard: [latex]x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}[/latex]] HTML: [none] LaTeX: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ Markdown: [none]

Multi-Line Examples

UFL: SymCommentMult [multi-line comment][note: also work as single-line comments][see also: SymComment] BBCode: workaround: [url=" Line 1 Line 2 Line 3 "][/url] non-standard: [comment] Line 1 Line 2 Line 3 [/comment] HTML: <!-- Line 1 Line 2 Line 3 --> LaTeX: [requires (comment): \usepackage{verbatim}] \begin{comment} Line 1 Line 2 Line 3 \end{comment} Markdown: <!-- Line 1 Line 2 Line 3 --> ================================================== UFL: BlockCode [or CodeBlock][multi-line code][see also: TextCode] BBCode: [code] Line 1 Line 2 Line 3 [/code] HTML: <pre><code> Line 1 Line 2 Line 3 </code></pre> E.g. output:


Line 1
Line 2
Line 3

LaTeX: [note: *doesn't* require: \usepackage{verbatim}] \begin{verbatim} Line 1 Line 2 Line 3 \end{verbatim} Markdown: [note: no trailing spaces needed] [note: backslashes treated literally] ``` Line 1 Line 2 Line 3 ``` ================================================== UFL: BlockQuote [or QuoteBlock][multi-line quotation] BBCode: [quote] Line 1 Line 2 Line 3 [/quote] HTML: <blockquote> Line 1<br> Line 2<br> Line 3 </blockquote> E.g. output:

Line 1
Line 2
Line 3

LaTeX: \begin{quote} Line 1 \\ Line 2 \\ Line 3 \end{quote} Markdown: [note: trailing double spaces] [also: trailing backslashes] > Line 1   > Line 2   > Line 3 > Line 1\ > Line 2\ > Line 3 ================================================== UFL: ListBulletPoint [a bullet point list of items] BBCode: [list] [*]Item 1 [*]Item 2 [*]Item 3 [/list] HTML: [note: unordered list] <ul> <li>Item 1.</li> <li>Item 2.</li> <li>Item 3.</li> </ul> E.g. output:

LaTeX: \begin{itemize} \item Item 1 \item Item 2 \item Item 3 \end{itemize} Markdown: [workaround: prevent 2 lists being treated as 1: <!-- -->] * Item 1 * Item 2 * Item 3 ================================================== UFL: ListNumbered [a numbered list of items] BBCode: [WARNING: many BBCode online previewers fail to handle numbered lists] [list=1] [*]Item 1 [*]Item 2 [*]Item 3 [/list] HTML: [note: ordered list] <ol> <li>Item 1.</li> <li>Item 2.</li> <li>Item 3.</li> </ol> E.g. output:

  1. Item 1.
  2. Item 2.
  3. Item 3.

LaTeX: \begin{enumerate} \item Item 1 \item Item 2 \item Item 3 \end{enumerate} Markdown: [note: for literal text, escape the full stop (period) e.g. '1\. Item 1'] [workaround: prevent 2 lists being treated as 1: <!-- -->] 1. Item 1 2. Item 2 3. Item 3 ================================================== UFL: Table [a 3x3 table with a header row, headers: 'header 1' to 'header 3', cells: 'A1' to 'C3', column B is centre-aligned, column C is right-aligned] BBCode: [WARNING: line breaks inside a table tag are treated as literal line breaks] e.g. no alignment: [table][tr][th]header 1[/th][th]header 2[/th][th]header 3[/th][/tr][tr][td]A1[/td][td]B1[/td][td]C1[/td][/tr][tr][td]A2[/td][td]B2[/td][td]C2[/td][/tr][tr][td]A3[/td][td]B3[/td][td]C3[/td][/tr][/table] e.g. alignment (using non-standard 'center'/'right' tags): [table][tr][th]header 1[/th][th]header 2[/th][th]header 3[/th][/tr][tr][td]A1[/td][td][center]B1[/center][/td][td][right]C1[/right][/td][/tr][tr][td]A2[/td][td][center]B2[/center][/td][td][right]C2[/right][/td][/tr][tr][td]A3[/td][td][center]B3[/center][/td][td][right]C3[/right][/td][/tr][/table] HTML:

<table style="border:1px solid black;">
	<thead>
		<tr>
			<th>header 1</th>
			<th>header 2</th>
			<th>header 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>A1</td>
			<td style="text-align:center;">A2</td>
			<td style="text-align:right;">A3</td>
		</tr>
		<tr>
			<td>B1</td>
			<td style="text-align:center;">B2</td>
			<td style="text-align:right;">B3</td>
		</tr>
		<tr>
			<td>C1</td>
			<td style="text-align:center;">C2</td>
			<td style="text-align:right;">C3</td>
		</tr>
	</tbody>
</table>

E.g. output:

header 1 header 2 header 3
A1 A2 A3
B1 B2 B3
C1 C2 C3

LaTeX: \begin{tabular}{|l|c|r|} \hline header 1 & header 2 & header 3 \\ \hline A1 & B1 & C1 \\ A2 & B2 & C2 \\ A3 & B3 & C3 \\ \hline \end{tabular} Markdown: [note: hyphens are mandatory (use at least 3 for greater compatibility)] [note: headerless table workaround: use blank header cells (you get a very thin top row)] [note: left-aligned by default] |header 1|header 2|header 3| |---|:---:|---:| |A1|B1|C1| |A2|B2|C2| |A3|B3|C3|

Links

Note: none of the online compilers (only previewers) below require a login: Online compilers for BBCode (can't handle 'list=1'): BBCode Viewer and BBCode Tester Online Online compilers for BBCode (can handle 'list=1'): BBCode Tester - Infinite Story Online compilers for Markdown: Markdown Live Preview Online compilers for LaTeX): Papeeria: online LaTeX editor Lists: List of XML and HTML character entity references - Wikipedia