DEV Community

Cover image for Markdown
davidrpolk
davidrpolk

Posted on

Markdown

If you've ever written a blog here on dev.to or on another platform that is geared toward posting text, you have probably used Markdown in one way or another. Markdown was released in 2004(15 years ago!!!). It was developed by John Gruber. It is a light-weight markup language used for things like posting text on discussion forums(or blogs like this one) and creating readme files in repositories. The output of Markdown is equivalent to what simple HTML can do. So, if you are familiar with HTML, it'll be easy to get used to using Markdown, since it is basically just shorthand for HTML. Taking a little time to learn the syntax is totally worth it to add some style to your blogs and forum posts. !

Let's Write Some Code

Since there's an HTML way to do what Markdown does, I'll provide the HTML version of all examples, for clarity. It's worth noting that in a Markdown article you can also write HTML tags.

---------------Headers---------------

If you want to create a Header using Markdown it's as simple as adding '#' in front of the text that you want to be the header

#This is an h1 Header

<h1>This is an h1 Header</h1>

Output:

This is an h1 Header

You can add additional '#'s in order to get all 6 different header sizes.

##This is an h2 Header

###This is an h3 Header

####This is an h4 Header

#####This is an h5 Header

######This is an h6 Header

<h2>This is an h2 Header</h2>

<h3>This is an h3 Header</h3>

<h4>This is an h4 Header</h4>

<h5>This is an h5 Header</h5>

<h6>This is an h6 Header</h6>

Output:

This is an h2 Header

This is an h3 Header

This is an h4 Header

This is an h5 Header
This is an h6 Header

--------------Emphasis---------------


Adding emphasis to your text is just as easy as creating headers!

*italics* or _italics_ **bold** or __bold__ ~~strike-through~~

<i>italics</i> <b>bold</b> <s>strike-through</s>

Output:
italics or italics bold or bold strike-through

---------------Lists-----------------

You can easily create lists also:

1. Ordered Item List


2. Another item
*Unordered List
+Unordered List
-Unordered List`

<ol>
<li>Ordered Item List</li>
<li>Another Item</li>
</ol>
<ul>
<li>Unordered List</li>
...
</ul>

Output:

  1. Ordered Item List
  2. Another item
  • Unordered List
  • Unordered List
  • Unordered List

With that bit we've got a great start on adding some styling to our posts. A little bit of style can go a long way, so please check out the second part of this series here.

while (life.left.length > 0) {
life.do = coding();
}

Top comments (0)