alt text

What is markdown?

Markdown is a text to HTML conversion tool for anyone wanting to document on the web. It allowes you to write plain text format that then is converted it to valid HTML.

It was created in 2004 by Jhon Gruber with collaboration with others including Aaron Swartz. Its syntax is influnec by previous text-to-HTML filters including Setext, atx, Textile, reStructuredText, Grutatext, and EtText.

The main difference is that markdown’s syntax is comprised entirely of punctuation characters as to look like what they mean.

Markdown is a lightweight super eazy¹ to use markup language that is widely used today.

Syntax Comparison

Lets compare the syntax between writing raw HTML and writing markdown.

Headers

The <h1> to <h6>tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.

HTML

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
..
<h6>Header 6</h6>

Markdown

# Header1
## Header 2
### Header 3
..
###### Header 6

Output

Header1

Header 2

Header 3

Header 6

Paragraphs

The <p> tag defines a paragraph.

HTML

<p> Quisque nisi nisi, pellentesque sit 
    amet arcu quis, ultricies commodo lorem.
    Vestibulum laoreet viverra nisl et feugiat.
    Vestibulum in lacinia nisl, a elementum risus.</p>

Markdown

Quisque nisi nisi, pellentesque sit 
amet arcu quis, ultricies commodo lorem.
Vestibulum laoreet viverra nisl et feugiat.
Vestibulum in lacinia nisl, a elementum

Output

Quisque nisi nisi, pellentesque sit amet arcu quis, ultricies commodo lorem. Vestibulum laoreet viverra nisl et feugiat. Vestibulum in lacinia nisl, a elementum

Emphasis

The <em> tag is a phrase tag. It renders as emphasized text. The <strong> tag is a phrase tag. It defines important text.

HTML

<em>This text will be italic</em>
<strong>This text will be bold.</strong>

Markdown

*This text will be italic*
**This text will be bold**

_this can also be italic_
__this can also be bold__

Output

This text will be italic This text will be bold

this can also be italic this can also be bold

Lists

The <li> tag defines a list item, its also used in:

ordered lists <ol>
unordered lists <ul>
menu lists <menu>

Unorder list

HTML

<ul>
    <li>apples</li>
    <li>oranges</li>
    <li>bananas</li>
</ul>

Markdown

- apples
- oranges
- bananas

Output

apples
oranges
bananas

Order list

HTML

<ol>
    <li>apples</li>
    <li>oranges</li>
    <li>bananas</li>
</ol>

Markdown

1. apples
2. oranges
3. bananas

Output

apples
oranges
bananas

BlockQuotes

The <blockquote> tag specifies a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

HTML

<blockquote>
    That's what she said
</blockquote>

Markdown

> That's what she said.

Output

That’s what she said.

Images

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.

HTML

<img src="images/logo.png">
<img src="https://www.example.com/images/logo.png">

Markdown

![alt text] (/images/logo.png)

![alt text](https://www.example.com/images/logo.png)

Output

Links

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

HTML

<a href="https://www.google.com">google</a>

Markdown

[google](https://www.google.com/)

Output

google

Code blocks

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

The <code> tag is a phrase tag. It defines a piece of computer code.

This is a python function

def square(value):
    result = value*value
    return result

HTML

<p>This is a python <code>function</code></p>

<pre><code>def square(value):
    result = value*value
    return result
</code></pre>

Markdown

1
2
3
4
5


```python
    def square(value):
        result = value*value
        return result
```

Output

def square(value):
    result = value*value
    return result

Tables

The <table> tag defines an HTML table.

An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

HTML

<table>
  <tr>
    <td>Ham</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>Spam</td>
    <td>no</td>
  </tr>
</table>

Markdown

| Ham | Spam |
| ----| ---  |
| Yes | No   |

Output

Ham	Spam
Yes	No

References

my opinion ^[return]