Markdown Grammar and Useful Package and Skills

Posted on |

How to use Markdown

Markdown (MD) is a simple markup language. The grammar of MD is briefer and easier than HTML/XML. To be fair, everyone can understand how to use MD in 10 minutes. :) That’s why MD is becoming more and more popular in nearly years.

Actually there are lots of perfect tutorials about Markdown and this one might be the worst one. I write this just for my own practice. Hope it can help. ;P

The official site of Markdown is here

Title

We can inplement at most 6 levels of title by using:

1
2
3
4
5
6
#Level 1 Title
##Level 2 Title
###Level 3 Title
####Level 4 Title
#####Level 5 Title
######Level 6 Title

List

Caution: We must add a space after the “-“ (Unordered List) and “n.”(Ordered List)

Unordered list code as shown below:

1
2
3
- Element 1
* Element 2
+ Element 3

Preview:

  • Element 1
  • Element 2
  • Element 3

The code of orderer list is:

1
2
1. Element1
2. Element2

Preview:

  1. Element1
  2. Element2

This is my favourite part of MD. Just think about how to insert a hyperlink by HTML, and you’ll understand my feeling.

The grammar of hyperlink in MD as shown below:

1
[link name](link address)

For example:

1
[These Football Times](http://thesefootballtimes.co/)

Preview:
These Football Times

Pictures

Because there are only 300MB free space on github, I use the imgur to store my pictures. Dropboxis also OK.

The grammar of the picture and the link is similar:

1
![picture name](picture link address)

For example:

1
![CRUYFF14](http://imgur.com/lCW0x8B)

CRUYFF14

Bold & Italic

The code of bold and italic as shown below:

1
2
**Bold**
*Italic*

Preview:
Bold
Italic

Code Quotes

Another my favourite part of Markdown. Plus, because of this feature, many programmers choose MD to build there own blog.

To build a 1 line(or shorter) code quote block, use “` “ like:

1
`print "hello world"`

Caution:
The “`” is different from the “‘“

Markdown and Sublime3

This part is about some useful package of markdown on sublime3.

Sublime3 Packages

If you didn’t install Package Control, click here
If you have installed Package Control, press command + shift + P, find Package Control: Install Package, then we can install these 2 useful packages.

MarkdownEditing

MarkdownEditing can provide grammar highlight for the Markdown in Sublime 3. It also provides some useful accelerator key such as:

  • input mdi and press Tab, it will generate ![Alt text](/path/to/img.jpg "Optional title")
  • input mdl and press Tab, it will generate [](link)

OmniMarkupPreviewer

OmniMarkupPreviewer(OMP) can help us preview our page in the explorer by press:
command + option + o
If you want to output the MD to the HTML, press:
command + option + x

Tricks

  1. To make a newline, input 2 spaces after the end of the line.
  2. The space is needed after these symbols:
    1
    2
    3
    -
    1. 
    #

Markdown and Next Theme for Hexo

The preview in OMP and my pages is different. I guess that maybe Next Theme (or Hexo) has something wrong when compile the MD. Now I’m still fixing this problem :)