Web Markup Cheatsheet

Your Internet browser interpret the Hyper Text Markup Language, more known as its abbreviation HTML, using tags to format and display each Web page you see, as we use LaTeX to format scientific and technical documents. It is however difficult to read through raw HTML code, hence other lighter Web markup languages have emerged, most notably the passe-partout Markdown (of the GitHub Flavour: GFM) and reStructuredText enabling documentation generation straight from comments in your Python programs. The cheatsheet below selects commonalities between both to get your document more likely to process correctly on either type of software. Please use exactly this syntax to reduce, if not eliminate, time loss in converting your documents! When the syntax differs between Markdown and reStructuredText, we choose raw HTML tags, which should not significantly hinder readability and can usually be passed to the Web site generator.

Here be a table by Justine and/or Olivier for the most compatible cheatsheet between .rst .md with the corresponding HTML tags. See https://gist.github.com/dupuy/1855764 for a discussion of identities and differences Think about how to pass LaTeX as well to display equations, what's the name of the online software for that again, Mathjax? I think we should look into Pandoc (see links below) as well, as these developers have pondered document conversion for a long while and it might be insightful for our choice of syntax. Typora of DCôté promo, supports Pandoc integration for directly importing files from another format, but not including .rst at the moment :( However, it (Typora) supports nicely HTML tags http://support.typora.io/HTML/ going in the direction of what I’m trying to do here :) *

Markdown, reStructuredText & HTML Cheat Sheet :

Markdown, reStructuredText & HTML Cheat Sheet
Style	Language	Code	Demo
Headers	md & rST Combined	Section Title¶ =============¶ Subsection Subtitle¶ -------------------¶	Section Title ================ Subsection Subtitle -------------------
Lists	md & rST	*•Sizes¶ *•Shapes¶ *•Colours¶ ⇥*•Blue¶ ⇥*•Green¶ (Note : “*”, “-“ or “+” can be used)	Sizes Shapes Colours Blue Green
		1.•First¶ 2.•Second¶ 3.•Third¶ ⇥1.•Alpha¶ ⇥2.•Bravo¶	First Second Third Alpha Bravo
Emphasis	md & rST	*Emphasis*	Emphasis
		**Strong**	Strong
Blockquotes	md & rST Combined	•>•Lorem ipsum¶ •dolor sit amet	> Lorem ipsum dolor sit amet
Inline Code	md & rST	``echo `uname -a```	echo `uname -a`
Code Blocks	md & rST Combined	Normal text ::¶ ⇥ #include <stdio.h>	Normal text :: #include <stdio.h>
Horizontal Rules	rST	¶ ---- ¶	----
		¶ **** ¶	****
		¶ ____ ¶	____
Escapable Characters	md & rST	\ \ Backslash	\ Backslash
		\ ` Backtick	` Backtick
		\ * Asterisk	* Asterisk
		\ _ Underscore	_ Underscore
		\ { \ } Curly braces	{ } Curly braces
		\ [ \ ] Square brackets	[ ] Square brackets
		\ ( \ ) Parantheses	( ) Parantheses
		\ # Hash mark	# Hash mark
		\ + Plus sign	+ Plus sign
		\ - Hyphen	- Hyphen
		\ . Period	. Period
		\ ! Exclamation	! Exclamation
Links	HTML	<a href=“https://google.com/"> Google</a>
		<a href=“https://google.com/" title=“Search”>Google</a>
		<a href=“https://google.com/" title=“Search”>Google</a>
		<a href=“https://google.com/"> https://google.com</a>
Images	HTML	<img scr=“path/to/img.jpg” alt=“Alt text”/>
		<img scr=“path/to/img.jpg” alt=“Alt text” title=“Title”/>
		<img scr=“path/to/img.jpg” alt=“Alt text” title=“Title”/>
Tables	rST	+-------+----------+------+ | Table Headings | Here | +-------+----------+------+ | Sub | Headings | Too | +=======+==========+======+ | cell | column spanning | +-------+----------+------+ | rows | normal | cell | +-------+----------+------+ | multi | * cells can be | | line | * formatted | | cells | * paragraphs | | too | | +-------+-----------------+	Table Headings Here Sub Headings Too cell column spanning rows normal cell multi line cells too cells can be formatted paragraphs

More Exhaustive Resources

• <a href="https://gist.github.com/dupuy/1855764">https://gist.github.com/dupuy/1855764</a> for a discussion of the correspondence between .rst and .md
• <a href="https://pandoc.org/MANUAL.html">https://pandoc.org/MANUAL.html</a> <a href="https://pandoc.org/index.html">Pandoc</a>, the swiss-army knife program to convert files from one markup format into another

> reStructuredText

• <a href="http://docutils.sourceforge.net/docs/user/rst/quickref.html">http://docutils.sourceforge.net/docs/user/rst/quickref.html</a> for a quick reference
• <a href="http://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html">reStructuredText primer</a> on the website of the <a href="http://www.sphinx-doc.org/en/master/index.html">Sphinx python documentation generator</a>

> Markdown

• <a href="https://guides.github.com/features/mastering-markdown/">The Github guide</a> on Markdown thus following GFM and its companion about proper <a href="https://guides.github.com/features/wikis/">project documentation</a>
• <a href="https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax">Main documentation</a> to write and format on GitHub with GFM, following its <a href="https://github.github.com/gfm/">spec</a>
• <a href="https://commonmark.org/help/">https://commonmark.org/help/</a>Cheatsheet and tutorial for the <a href="https://spec.commonmark.org/0.29/">CommonMark specification</a> on which GFM is based

> HTML & Web Development

• <a href="https://developer.mozilla.org/en-US/docs/Learn">https://developer.mozilla.org/en-US/docs/Learn</a> tutorials by Mozilla developers: <a href="https://developer.mozilla.org/en-US/docs/MDN"> The MDN project</a>
• <a href="https://www.w3schools.com/">https://www.w3schools.com/</a> a convivial and popular site to learn Web development, though a bit heavy on advertising
• <a href="https://movethewebforward.org/">https://movethewebforward.org/</a> for more advanced Web development