Markdown Tutorial | Easy way to create static web pages

Marimuthu Periyannan
3 min readNov 10, 2020

Markdown is a lightweight and easy-to-use syntax creating pages like HTML.

Markdown is a text file format, used to apply styles on a plain text file to look-a-like an web page. You can use .md files for creating static pages in your website. It can be used to create documentations quickly. A good choice for content writers.

“Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).”

Markdown files are converted to HTML files by Markdown applications.

Most of the modern web technologies has build-in feature to convert .md files into .html files.

Preview Markdown (Source & Preview)
  1. Create a Markdown file using a text editor (Visual Studio Code).
  2. The extension of the file should be .md or .markdown.
  3. Open the Markdown file in a Markdown application.
  4. Use the application to covert it into HTML document.

Example:

Headers H1 / H2 / H3

# Heading H1

## Heading H2

### Heading H3

Font Style: Bold, Italic

**bold text**

*italicized text*

> blockquote

Ordered List

1. First Ordered item

2. Second Ordered item

3. Third Ordered item

Unordered List

- First Unordered item

- Second Unordered item

- Third Unordered item

Block of code (without indentation) using back-ticks

`

// block of code

public static void main(String[] args) {

System.out.print(“Hello, Markdown World!”);

}

`

Code snippet (with indentation) using 3 backticks

```

// fenced block of code

public static void main(String[] args) {

System.out.print(“Hello, Markdown World!”);

}

```

Shell/Dos command (cd, md, ls, …) highlighter

```sh

$ cd dillinger

$ npm install -d

$ node app

```

Hyperlink

[title](http://hemasthoughts.com)

Image

![heamsthought](http://hemasthoughts.com/assets/images/hemasthoughts.png)

Horizontal ruler <HR> tag

— -

Simple table

| Roll No | Name |

| — — — — | — — |

| 101 | Anil |

| 201 | Arjun|

| Story | Link |

| — — — | — — — |

Table example with Hyperlinks

| REST API using Jersey 1.x | https://marimuthup.medium.com/rest-api-using-jersey-1-x-bc446cfa9e57 |

| Vue-powered Static Site Generator for Bloggers | https://bit.ly/32seWxU |

| What is HTML, CSS and JavaScript called? | https://bit.ly/2U9VEsu |

| First Steps after Oracle Installation | https://bit.ly/2JT38hT |

Footer

Here’s a sentence with a footnote. [¹]

[¹]: This is the footnote.

Custom Id

#123

### My Great Heading {#123}

Term/Definition like style

Markdown

: a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber and Aaron Swartz.

Text format — strikethrough

~~This word is striked through.~~

Check List (prefixed with checkbox)

My Task List

- [x] Design

- [x] Development

- [ ] Unit Testing

- [ ] Integration Testing

Reference

--

--