DEV Community

loading...
Cover image for Markdown 101

Markdown 101

jackykumarshaw profile image Jacky Kumar Shaw ・5 min read

Introduction

Markdown is a lightweight mark-up language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular mark-up languages. Specifically, it 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).

If you have 10 mins:-

Markdown does not do anything fancy like change the colour, size or type of the font. All we can do using Markdown is make text BOLD or Italic, creating headers, and organising lists.
Although it seems insignificant for some beginner dev to spend dedicated time for learning this, there has to a reason why tech-giants like GitHub and Reddit are using Markdown language heavily.
I know being a beginner you will never have time to learn Markdown, just to make the README.md of your project in GitHub look better. But you do read blogs right? If the blog about some new super cool update that's expected to come in the next Android OS, you spend your 5-6 minutes reading that blog without even thinking about it. In the very same way if you just complete reading this tiny blog on Markdown, I can assure you that, this will keep paying off all your life.

Markdown Basics

Make it Italic

To make a phrase appear in italic, just surround
it with either underscores like ( _this_ ) or
with single asterisks like ( *this* ).

Make it Bold

To make a phrase appear in bold, just surround it with double asterisks like ( **this** ).

Headers comes in 6 sizes!

There are 6 types of headers. Starting form Header One being the largest to Header Six being the smallest.
To make a phrase into a Heading level K, we just have preface the phrase with K hashes. For example
### This will be Heading Level 3
###### This will be Heading Level 6

Links

Inline Links

To make an inline link, write the link text in square brackets then just after that write the link URL in parenthesis. For example,
[Search it!](www.google.com) will display a text "Search it!", but when one clicks on the text, then one reaches "www.google.com"

Reference Links

Now if you have many such text pieces in your entire document from where you want to land to the same particular URL, and if you follow the inline link method to make all those text pieces into inline links, then, if suppose that particular URL got changed, then you will have to go and make the changes in each and every place where you have attached that URL in your document! Sounds tiring? Hence came the concept of Reference links. Reference links are very much like Macros in C language. To use reference links, every phrase which is to be made as an inline link, must be written inside square brackets as usual but instead of being followed by the actual URL inside parenthesis, we have to follow it by writing some common text inside a pair of yet another square brackets! Then, at the end of the document we just have to write:-
[that_common_text]: www.thatParticularURL.com
And don't worry, the above line wont appear in the rendered document.
Now as you might have guessed already, if in case the URL changes, then, we just have to change the URL written at the end.

Images

Inline Image Link

To create inline image link, the process is same as that of creating inline links, except for the fact that the square brackets containing the alt text must be preceded by an exclamation mark. For eg:-
![alt_text] (www.ImageURL.com)

Q)BTW, What's "alt_text"? I hear you asking.
Ans) If the internet connection is slow and the image could not get loaded, then in place of the image this "alt_text" will be displayed, thereby giving the visitor some idea about what that image was about. And also if a visually impaired person is using some screen reader, then, reading that image means reading that "alt_text". So we must give an "alt text" which describes the image in just a word or two.

Reference Image

Again for creating reference image, the process is same as creating reference links, and the exception is also the same as in creating inline image link. Yes, you are right! I am referring to the "!" thing only.

Blockquote

For creating quote inside a block (aka Blockquote), we can just have to preface the sentence or paragraph with the "greater than" caret ( > ) symbol. Remember if the quote expands into multiple paragraphs, then at the beginning of every paragraph and and the the beginning of every blank lines in the space between the paragraphs also, there needs to be a "greater than" ( > ) symbol. For example,
> Life begins where Fear Ends --Osho

Lists

Unordered List

For making an unordered list, write every item in a new line with each item being preceded by an asterisk ( * ) followed by a blank space. Remember if you don't give a blank space after the asterisk, it wont work. For example,
Fruits:-
* Apple
* Banana
* Orange

Ordered List

For ordered list, just write the numbers, and make an ordered list as you would normally do. The Markdown language will understand and render that for you. Nothing special to be done here.

Nested Lists

For making nested lists, we just have to indent the asterisks accordingly. That's it. No big deal.

Inline Code

If you want a highlighted text, it called Inline Code in Markdown. So for highlighting a phrase or code or number or key or anything, you just have enclose the phrase within a pair of "backticks". Backtick symbol looks like ( ` ).

Blocks of code

For sure you would need to add code snippets. And Markdown has got you covered. To make a block of code we just have to write three backticks in a line, then start writing our code from the next line, and then on a new line after the last line of the code snippet we again have to write three backticks. That's it.

Soft Breaks

If you write a poetry, it will appear as a paragraph. So to break the lines of the poetry, we have to write two extra blank spaces at the end of each poetry line before pressing enter to go the new line. This is known as soft-breaks. For example, consider dots as blank-spaces:-
Rain Rain Go Away..
Come again another day..
Little Johnny wants to play..
Rain rain go away

Congrats!! You did it!

Interesred in learning more?

Believe it or not, we’ve only just begun exploring what can be accomplished with Markdown. There are many “extended” implementations of Markdown that support formats like tables, definition lists, footnotes, and more. Because they’re non-standard, they’re not essential to learning the basics, as we’ve introduced here.

If you’d like to know more about these Markdown implementations, you’re welcome to explore any number of other Markdown apps and tutorials. Here are just a few:-

https://daringfireball.net/projects/markdown/
https://spec.commonmark.org/dingus/
https://johnmacfarlane.net/babelmark2/faq.html
https://www.markdownguide.org

Discussion

pic
Editor guide