Category : Web

0 comments

Markdown: The Ultimate Guide For Beginner

by  on 

Do you know What Markdown is and How to get started?

If you are a blogger or developer, so I bet some of you may already familiar with this tool Markdown. If not, then this tutorial is for you to learn it from scratch.

What is Markdown?

Markdown is a markup language for formatting text to write with an easy- to-read format that convert it directly Into valid HTML.

If you write for the web so it is a very simple text-to-HTML conversion tool which don’t use complex tags or built-in menus for formatting text. Markdown uses characters and punctuation to achieve the same result as we get from any editor or writing HTML code manually.

Markdown let you write web content without having knowledge of HTML.

Markdown let you write web content without having knowledge of HTML, Is it true? Yes, it is true.

For example, If you want to bold some text so you do not need to use <b>bold</b> tag for formatting, Instead use **double asterisks** to get the job done.

For this purpose, you can test your code in a desktop or Web-based editor with live preview.

Desktop editor

Online web based editor

Get started with Markdown

Below is step by step guide To get you started writing in Markdown with an editor of your choice.

Header

# Is denoting Header and the number of # determine the level of the header, You can close the header at the end if you think it looks better because the closing hashes don’t even need to be equal to the number of opening hashes.

Note: I don’t recommend for a closing header with the hash at the end. Like #h1 heading#, ##h2 heading## and so on.

#Heading one in style
##Heading two having two hashes
###Heading three
####Heading four
#####Heading five
######Heading six
Alternate syntax for H1 and H2
Alternate-H1
============
Alternate-H2
------------

Live preview in HTML format

<h1>Heading one in style</h1>
<h2>Heading two having two hashes</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
<p>Alternate syntax for H1 and H2</p>
<h1>Alternate-H1</h1>
<h2>Alternate-H2</h2>

Paragraph and line break

When you write a bunch of lines of text in Markdown so It automatically convert that lines of text in HTML <p>Paragraph</p> tag, separated by a blank line.

In HTML, You can easily break the line with <br/> tag, but here in Markdown you only add two spaces at the end of the line to get the same effect.

This is a first Line (space+space)
This is a second Line

General Elements

Here, In General Elements we will take a look at a useful technique which is very important to grasp.

  1. To Renders as emphasized text, wrap it in either a *single asterisk* or _single underscore_.
  2. To boldly emphasize text, wrap it in either **double asterisk** or __double underscore__.
  3. You can create a horizontal rule <hr/> by implementing 3 or more *, - or _ on a single line.
  4. To use text as <code></code> tag, wrap the text in `single backtick`.
  5. For specifying code demo in <pre><code></code></pre> tags, wrap the HTML, Javascript or PHP codes ``` within three backticks ```.
  6. To add a table, do it with raw HTML Itself because markdown is smart enough to know that what to do.

Ordered and Unordered lists

This is another cool feature of markdown for specifying lists which is pretty straightforward, Simply add number+dot+space for ordered list, Use *, - or + for Unorderlist.

1. one
2. two
3. three
OR
* four
- five
+ six

Result in markup

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<p>OR</p>
<ul>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>

blockquotes and backslash

You can easily add blockquote in Markdown with the help of right angle bracket > which is sometimes also called greater than sign.

> ##Double hashes header
>
> This is the first paragraph

Becomes

<blockquote>
<h2>Double hashes header</h2>

<p>This is first paragraph</p>
</blockquote>

Markdown allows you to escape characters with the backslash, which would have a different meaning at some point.
For example, If you want to wrap a text with Asterisk instead of using <em></em> tag, You can do it with \*backslash\* which results in *backslash*.

Inline links and images

Markdown gives us very simple instructions for adding links and images within the post.
There are two kinds of link out there, One is used for an email address and Next one is used for the inline link.

For Implementing inline link Use square bracket [] and parenthesis () Next to it,

[Link text](http://linkAddress.com)

Result in HTML

<a href="http://linkAddress.com">Link text</a>

Now lets move on for adding an email address, For an email address wrap the email within < and > brackets.

<[email protected]>

Image syntax and link syntax are very similar to each other, but the only difference is by adding ! Symbol in front of [].
Note: In square bracket you can use alternate text for better image optimization.

![Example logo](http://www.example.com/logo.jpg)

Output

<img src="http://www.example.com/logo.jpg" alt="Example logo">

Conclusion

This tutorial gives you a brief introduction to Markdown and How to get started with it, With easy to follow examples.

So finally, I believe, The more you practice, The easier it would be.

Now I want to hear from you about Markdown, Maybe I missed something.
Just leave me a comment below to let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *