Hello everyone. Hope you are doing great.
I am Madhav Gupta and this post will be dedicated to markdown.
By the end of this post, I really hope that you'll be having more than enough knowledge of markdown to use it in your daily life.
Let's start with a bunch of questions,
Q- What is Markdown?
A- Markdown is a lightweight markup language with plain text formatting syntax. In simple terms, markdown is a way to style text on the web having simple syntax than HTML.
Q- Why bother learning it?
A- There can be a lot of reasons to learn Markdown, I will be listing some of them
- Easy to learn and easy to read
- Used in Github documentation
- can be easily converted into other formats
- you might start writing posts on dev.to after learning it
Enough with the questions, let's get on board.
- Headers
There are six types of headings ranging from H1 to H6. You can use headers in two ways.
First - Using a # followed by the text
Second - Inserting 3 ===(for H1) or ---(for H2) below the text. The downside of going through this path is that you can only use H1 and H2. Hence I'll recommend sticking to the former way.
Examples -
# H1
## H2
### H3
#### H4
##### H5
###### H6
(spaces given for readability)
H1
H2
H3
H4
H5
H6
H1
===
H1
H2
---
H2
- Text Formatting
Formatting text in markdown is very easy. You can change the feel and look of your text by making it italic, bold or striking it.
Examples -
_italic_ or *italic*
italic
__bold__ or **bold**
bold
~~strikethrough~~
strikethrough
Since there are two ways for text to be italic and bold. So in order to avoid the confusion, I will recommend using italic and Bold. This will help you in reducing the ambiguity and confusion you might face while styling your text.
- Lists
You always make lists for one purpose or another. You can use both unordered and ordered lists in markdown according to your needs
Unordered Lists
Here is the syntax for an unordered list in markdown. You can replace + with * or -
+ First item in the unordered list
+ Another item in the unordered list
+ one more item
Above code gets converted into this.
- First item in the unordered list
- Another item in the unordered list
- one more item
Ordered Lists
1. The first item in the ordered list
2. The second item in the ordered list
3. The third item in the ordered list
Instead of going with the above syntax, you can also go with
1. The first item in the ordered list
1. The second item in the ordered list
1. The third item in the ordered list
and both the examples will result in the following list
- The first item in the ordered list
- The second item in the ordered list
- The third item in the ordered list
- Links
You can use links in markdown by using the following syntax.
[Text](the link you want to relate with text)
Example -
[Link to my first article](https://dev.to/madhavgupta/visual-studio-code-and-its-magic-1a2m)
Both ways can be used to reference external links but I will recommend the latter one for enhanced readability. Instead of using [1], you can use anything such as [meow] or [blah] and it will work fine.
If there is no text, then you can highlight the link be using <link>.
- Images
Images can be embedded in a markdown document by using the following syntax. Not only images, but you can also use gifs too by using the same syntax.
Example -
- Horizontal Rule
Depending on how your parser makes the horizontal rule, it is always great to have some of them in your article/documentation.
Example-
--- or *** or ___
- Code block
Add code blocks to your posts/articles by surrounding your code with three
backticks and if you want to highlight syntax, then write the name of language after backticks.
- Block Quote
Give special emphasis to the quotes to make them stand out.
> Quote
Example -
> “Websites promote you 24/7: No employee will do that.”
― Paul Cookson
“Websites promote you 24/7: No employee will do that.”
― Paul Cookson
- Tables
Showing data in tabular form is very convenient and I must say, making tables in markdown is not so pretty. One more thing, the : is responsible for the alignment of the elements in rows. Examples given below will make this statement more clear.
|Songs|Creators|
|:-----|:-----|
|Without Me|Helsey, Khalid and Benny Blanco|
|Hope|Chainsmokers|
|Never Gonna give you up|_I'll leave it here_|
| Songs | Creators |
|---|---|
| Without Me | Helsey, Khalid and Benny Blanco |
| Hope | Chainsmokers |
| Never Gonna give you up | I'll leave it here |
|Songs|Creators|
|-----:|:-----|
|Without Me|Helsey, Khalid and Benny Blanco|
|Hope|Chainsmokers|
|Never Gonna give you up|_I'll leave it here_|
| Songs | Creators |
|---|---|
| Without Me | Helsey, Khalid and Benny Blanco |
| Hope | Chainsmokers |
| Never Gonna give you up | I'll leave it here |
You can also use the good-old HTML tags(pre, code, img, table) in markdown if you ever feel the need to. Markdown is great and it makes sure that your entire focus remains on the content.
If you knew it all, congratulations. This post might act as a refresher for you. If it is the other way around, Hope it helps.
So, that's it for today. I'll be back soon with another one(open for ideas).
Hope you like it.
Have a great day. Thanks.
Top comments (0)