Markdown - Simple formatting for your documents

2015.12.31 tutorial webdev markdown

This will be the first post of a series where I teach frontend developement. This series will include everything you need to know, sufficient to get you started with the basic tools that can help you create your site.

All web pages have formatted structure and content. Markdown exposes the most commonly used structures in web documents, so you can produce web documents without any knowledge of HTML.

Markdown is a widely adopted tool, and can be used to write your posts on Wordpress and Tumblr, among other places. It is great place to start gaining more control over your content.

Trying it out

You can try Markdown using a web markdown editor, such as dillinger.io. But for those with more time on their hands, you can download the official markdown compiler to generate your web document (instructions here).

Basic markdown syntax

Here are a few basic formatting that you will be using very often in your documents.

# H1 Header: Title of the document
## H2 Header: Subtitle of the document
### H3 Header: Sub-subtitle of the document
#### H4 Header: It goes all the way to H6, so...
Do remember the space after the hashes

- Unordered list item1
* Unordered list item2
+ Unordered list item3
Yep, you can use either &quot;-&quot;, &quot;*&quot; or &quot;+&quot;

1. Ordered list item1
2. Ordered list item2
5. Ordered list item3
It doesn&#039;t matter the order of items, they will all appear in the same list.

**Bold Text**
__This is bold text too__
These will be surround by &lt;strong&gt; tags (more on that in the next tutorials).

*Italics Text*
_This works too_
Surrounded in &lt;em&gt; tags, it means emphasised text (we&#039;ll cover that later too).

&gt; quoteblock
&gt; &gt; Yep, quoteblocks can be nested
Quoteblocks are separated blocks of text that can be styled different from the rest of the text.

`inline code`
`` If you want to put &quot;`&quot; in your code, this is the way to go. Do note the space after the double backticks. ``

---
***
Horizontal rule (one line across the document), both works

Links and Images

Links and images can be written differently, either inline or referenced.

Inline format for links
[Link Text](Link URL)
[Google](https://www.google.com)

Inline format for images
![Alt text for image](Link to image)
![Example Image](https://path/to/image.jpg)

Reference style format
[Google][1]
[1]: https://www.google.com (optional title)

Self referring format
[Google][]
[google]: https://www.google.com (name not case sensitive)

The references can be placed anywhere in the document, after the paragraph they are used, or at the end of the document, like footnotes.

Where to go after this

Markdown is just a basic formatting for your documents. All these are compiled into HTML(hyper-text markup language) which when viewed in browsers, comes will all the appropriate styling.

In the next tutorial, we will delve deeper into HTML itself, which gives you a better understandin of the HTML file that Markdown outputs.

I want more

There are many different markup languages, geared towards different usages. Personally, I would recommend you to learn and master GitHub Flavoured Markdown. It is one of the few widely adopted extension for markdown and can be used in many blogging and content creation platforms (dillinger supports GFM too).

The extended Github Flavoured Markdown includes many syntax to format more complex document structures like tables, code blocks, and many more.

Fountain is a markup language specially designed for writing scripts for plays. There are many different formatting for standard elements in plays, such as the setting, dialog, etc.

There are more of course, so, go forth and explore them on your own.