Styled Text Formatting

From Exterior Memory
Jump to: navigation, search

There are many ways to style plain text. Current mechanisms include text-to-html in Wikis, blogs, and forums. Before that, setext and e-mail also had conventions for text styling. The quote character (>) in e-mail replies is one of those conventions. Markdown is clear spin-off from those attempts.

The list includes Markup languages HTML, BB code, MarkDown, reStructuredText, Trac, MediaWiki, DokuWiki, LaTeX, and ConTeXt. For the interested few, you may also want to look at DocBook, CSS, WakkaWiki, Setext, atx, Textile, Grutatext, and EtText. Wikipedia's List of Lightweight markup language also gives a short comparison.

Obviously, the purpose of these markup languages differs. While CSS and BB Code focus on the font layout, other language such as DocBook, MarkDown and XMHTML focus mostly on the text structure. Unfortunately, only few languages have such a clear distinction between structure and layout, and we see lots of markup languages that mix this up, such as LaTeX and HTML (despite their false promises to distinguish between the two).

Layout Features

Font Style and Weight

Bold Italic Underline Strikethrough
HTML <strong>Bold</strong>
or <b>Bold</b>
or <i>Italic</i>
(or unofficial <ins>Underline</ins>)
or <s>Strikethrough</s>
(or unofficial <del>Strikethrough</del>)
BB code [b]Bold[/b] [i]Italic[/i] [u]Underline[/u] N/A
MarkDown **Bold**
or __Bold__
or *Italic*
reStructuredText **Bold** *Italic* N/A N/A
Trac '''Bold'''
or **Bold**
or //Italic//
__Underline__ --Strikethrough--
MediaWiki '''Bold''' ''Italic'' <u>Underline</u> <del>Strikethrough</del>
DokuWiki **Bold** //Italic// __Underline__ <del>Strikethrough</del>
WakkaWiki **Bold** //Italic// __Underline__ ++Strikethrough++
LaTeX \textbf{Bold}
or {\bf Bold}
or \textit{Italic}
or {\em Italic}
\underline{Underline} \usepackage{soul}
ConTeXt {\bf Bold} {\em Italic} \underbar{Underline} (can not be combined with italic) \overstrike{Strikethrough}
CSS font-weight: bold font-style: italic text-decoration: underline text-decoration: line-through


Monospaced Superscript Subscript Coloured
HTML <tt>Monospaced</tt>
or <code>Code</code>
<sup>Superscript</sup> <sub>Subscript</sub> <span style="color:red">Coloured</span>
or <font color="red">Coloured</font> (deprecated)
BB code N/A N/A N/A [color=red]Coloured[/color]
MarkDown `Code` (for code) N/A N/A N/A
reStructuredText ``Monospaced`` N/A N/A N/A
Trac {{{Monospaced}}}
or `Monospaced`
^superscript^ ,,subscript,, [[span(style=color:red, Coloured )]]
MediaWiki <tt>Monospaced</tt> <sup>Superscript</sup> <sub>Subscript</sub> <span style="color:red">Coloured</span>
DokuWiki ''Monospaced'' <sup>Superscript</sup> <sub>Subscript</sub> N/A
WakkaWiki ##Monospaced##
or #%Key#% (to signify a key press)
- - {{color c="red" text="Coloured"}}
or Highlight (for one specific highlight color)
LaTeX \texttt{Monospaced} ^{Superscript} _{Subscript} \usepackage{color}
{\color{red} Coloured}
ConTeXt {\tt Monospaced} ^{Superscript} _{Subscript} \setupcolors[state=start]
CSS font-family:monospace N/A N/A text-color: red

The tables above do not contain font size changes, centered text and lesser used features such as slanted (oblique), overbar (the opposite of underline), small capitals, etc. For these features, consult the documentation of each markup language.

Text Structure Features


Main Title
Section Heading
HTML <h1>Main Title</h1> <h2>Section Heading</h2> <h3>Subsection</h3>
BB code N/A N/A N/A
MarkDown Main Title

or # Main Title
Section Heading

or ## Section Heading
### Subsection
reStructuredText ==========
Main Title
Section Heading
Trac == Main Title == === Section Heading === ==== Subsection ====
MediaWiki == Main Title == === Section Heading === ==== Subsection ====
DokuWiki ====== Main Title ====== ===== Section Heading ===== ==== Subsection ====
WakkaWiki ====== Main Title ====== ===== Section Heading ===== ==== Subsection ====
LaTeX \chapter{Main Title} \section{Section Heading} \subsection{Subsection}
ConTeXt \chapter{Main Title} \section{Section Heading} \subsection{Subsection}


  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List
      Definition List
HTML <ul>
  <li>Unordered List</li>
  <li>Ordered List</li>
  <dd>Definition List</dd>
BB code [list]
[*]Unordered List
[*]Ordered List
MarkDown * Unordered List
or + Unordered List
or - Unordered List
1. Ordered List N/A
reStructuredText * Unordered List
or + Unordered List
or - Unordered List
1. Ordered List Term
⎵⎵⎵⎵Definition List
Trac * Unordered List 1. Ordered List term:: Definition List
MediaWiki * Unordered List # Ordered List ; Term : Definition List
DokuWiki ⎵⎵* Unordered List ⎵⎵- Ordered List N/A (available with plugin)
WakkaWiki ⎵⎵⎵⎵- Unordered List
or ~- Unordered List
⎵⎵⎵⎵1) Ordered List
or ~1) Ordered List
LaTeX \begin{itemize}
&nbs[; \item Ordered List
  \item Ordered List
  \item[Term] Description List
ConTeXt \startitemize
\item[1] Unordered List
\item Ordered List
Definition List</br/>\stopvariable

Some markup languages (HTML, MarkDown) allow multiple paragraphs within a list, but most don't allow this (Mediawiki, BB code)

Text Blocks

Plain text


HTML <blockquote>
BB code N/A N/A
MarkDown > Indentation ⎵⎵⎵⎵Multiline
reStructuredText | Line blocks (preserves line breaks)
or ⎵⎵⎵⎵Block quote (line wrapped)
⎵⎵⎵⎵Literal block
Trac ⎵⎵⎵⎵Block quote {{{
Preformatted test
MediaWiki : Indentation {{{
Preformatted test
DokuWiki N/A N/A
WakkaWiki ⎵⎵⎵⎵Indented Text
or ⎵⎵⎵⎵Commented Text
LaTeX \begin{quote}

or \begin{quotation}
ConTeXt \startquotation

\startLang Multiline Code \stopLang

For other layout elements such as horizontal lines, floats, etc. consult the documentation of the respective markup language.


Internal cross-reference External Link Image.png
HTML <a href="Main_Page">Internal Link</a> <a href="">External Link<a/> <img src="images/Image.png"/>
BB code N/A [url][/url]
or [url=]External Link[/url]
MarkDown N/A [External Link](
or <>
![alt text](image/image.png)
reStructuredText `phrase reference`_
or [1]_ to .. [1] Footnote/citation or `External Link <>`_ .. image:: images/image.png
Trac MainPage (CamelCase)
or wiki:"main page" [[Image(images/image.png)]]
MediaWiki [[Main Page|Internal Link]] [ External Link] [[Image:image.png]]
DokuWiki [[Main Page|Internal Link]] [[|External Link]] {{image/image.png}}
WakkaWiki MainPage
(CamelCase) or [[MainPage Internal Link]]
or [[ External Link]]
{{image url="image/image.png"}}
LaTeX Section \ref{section.2} \usepackage{hyperref}
\href{}{External Link}
ConTeXt \goto{Internal Link}[section.2] \setupinteraction[state=start]

Some markup language have special features to link to e-mail addresses next to web pages. Consult the documentation for each respective markup language for details.


Head 1Head 2
HTML <table>
<tr><th>Head 1</th><th>Head 2</th></tr>
BB code N/A
MarkDown N/A
reStructuredText +---------+---------+
| Head 1  | Head 2  |
| Field 1 | Field 2 |
| Field 3 | Field 4 |
Trac ||= Head 1 =||= Head 2 =||
|| Field 1  || Field 2  ||
|| Field 3  || Field 4  ||
MediaWiki {|
! Head 1 || Head 2
| Field1 || Field2
| Field3 || Field4
DokuWiki ^ Head 1 ^ Head 2 ^
| Field1 | Field2 |
| Field3 | Field4 |
WakkaWiki {{table columns="2" cells="Head 1;Head2;Field1;Field2;Field3;Field4"}}
LaTeX \begin{tabular}{ll}
Head 1 & Head 2 \\
Field1 & Field2 \\
Field3 & Field4 \\
ConTeXt \starttable[ll]
\NC Head 1 \NC Head 2 \SR
\NC Field1 \NC Field2 \AR
\NC Field3 \NC Field4 \AR