Search for a command to run...
Markdown is the new normal for the developers. Learn 20+ helpful markdown syntaxes for blogging, websites, and note-taking.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
spider solitaire 2 suit What a fantastic list of Markdown syntax! Thank you for the helpful advice!
Thanks a lot.
Welcome 🙏
Thank you Elef
Your blog give so much valuable information. From your repo only I came to know about markdown and I have already made some notes using it.
Thanks for providing so much value. 🙌🏼
Thanks a lot Tejinder JI
"Open Source" is a magic pot. After spending a couple of years contributing to and maintaining several OSS projects, I am in a position to spread awareness so that more developers participate.
Hacktoberfest 2021 is making lots of buzzes already. As an Opensource enthusiast, you need to be aware of a few facts. Let's learn them.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
Markdown is a markup language for formatting text using simple syntaxes. It is widely used for blogging, websites, comment management services, readme files, and documentation. Unlike HTML, markdown doesn't have tags to define structure and features. The markdown syntaxes are combinations of special characters with plain texts.
In this article, we will discuss a list of markdown syntaxes you will use most of the time. It will probably cover the 99% of cases you need markdown. We will learn the syntaxes and how the syntax will render on the browser.
Please note that there are different flavours of markdown available today. For example, GitHub has been using its version of Markdown, where they have added some extra formatting. However, most of the syntaxes work across all the flavours.
If you are interested in learning about the Markdown from the video tutorial, you can check out this one:
Headings and sub-headings are the basic needs for any documentation. The heading gives structure. The syntax of the heading starts with a # symbol followed by a space and the heading text. For the first level heading, you should give one #, two # symbols for the second level, and so on.
The following markdown snippet shows the syntaxes of six types of headings. When you render them on the browser, they appear like HTML's H1 to H6 tags.
# H1 - Heading 1
## H2 - Heading 2
### H3 - Heading 3
#### H4 - Heading 4
##### H5 - Heading 5
###### H6 - Heading 6
Here goes the output of the heading syntaxes.
The inline code syntax uses the backtick symbols(``) around the code to highlight it.
The syntax goes like this:
`This is Code`
Here is the output of the above syntax. Please note that the look and style of the inline code may differ from one to another markdown variants.
This is Code
HTML has the tags for unordered list(<ul><li>) and ordered list(<ol><li>). In markdown, you can create them in multiple ways. Let us first see the unordered list syntaxes.
To create an unordered list of items, you can use the hyphen(-) and space as a prefix to the list item, as shown below:
- Milk
- Tea
- Beer
It will output a bulleted unordered list like this:
The alternate syntax for the unordered list uses the asterisks(*) symbol instead of the hyphen(-) we used above.
* Milk
* Tea
* Beer
It will result in similar output.
You can prefix the list items with the 1. and space for the ordered list.
1. Eat
1. Walk
1. Sleep
Output:
Often you may want to create a task list like the TODO items. The user can make a task complete by checking a checkbox. An example of it is the Pull Request description on GitHub. You may want your contributors to confirm what kind of changes and tests they have performed out of a given list.
The syntax of the task list is to prefix the list items with a combination of a hyphen(-), square brackets([]) and a space in it. If you want the task item to appear as done, you need to add the letter X in the capital case.
In the example below, the task Code is checked(task done), and the rest are unchecked tasks.
- [X] Code
- [ ] Review
- [ ] Commit
All the markdown flavoured platforms may not support this syntax. The output may appear like this in the supported platforms.
Highlighting a code block is a much-needed feature for technical documentation and blogs. We have seen the syntax for the inline code previously. For the code block syntax, you have to enclose the code block within the three backticks symbol.
```
It is a code block. You can create code syntaxes like JavaScript, HTML, CSS, Bash, and many more.
```
The output will be like a highlighted block of code:
It is a code block. You can create code syntaxes like JavaScript, HTML, CSS, Bash, and many more.
To highlight the language-specific code block, you can add a language name at the end of the initial backticks, as in the following examples.
Here is an example of the JavaScript code block:
```js
function print() {
console.log('This is is a JavaScript Code Block');
}
```
Here is the output:
function print() {
console.log('This is is a JavaScript Code Block');
}
To highlight the code block of bash or shell,
```bash
# This is bash
echo 1
```
Here goes the output:
# This is bash
echo 1
To make a text appear like it is striking through, you need to enclose it within two tildes (~~) symbols.
~~Sharing is NOT about Caring.~~
The output will be:
Please note that the striking through format may not be supported in all the markdown platforms.
Use the > symbol with space as a prefix to render a text as a quote(or blockquote).
> When I say something, I mean it. When I mean it, I do it. When I do, I may fail. When I fail, I start talking about it again!
The output:
When I say something, I mean it. When I mean it, I do it. When I do, I may fail. When I fail, I start talking about it again!
You need to use two asterisks(**) symbols as a prefix and a suffix to highlight a text as bold.
**DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.**
The output:
DO NOT UNDERESTIMATE THE POWER OF A PROGRAMMER.
You need to use one asterisk(*) symbol as a prefix and suffix to highlight a text as italic.
*It is Written in Italics*
The output:
It is Written in Italics
You need to use three asterisks(***) symbols as a prefix and a suffix to highlight a text as both bold and italic.
***You Can Combine Bold and Italics***
The output:
You Can Combine Bold and Italics
Linking to an external resource is a widely used feature you want to incorporate into your documentation. In HTML, we accomplish it using the anchor(<a>) tag. With markdown, you do it with the following syntax,
[LINK_TEXT](LINK_URL)
Here is an example of using the above syntax to link to my Website.
Did you know I have [Website](https://tapasadhikary.com)?
The output:
Did you know I have Website?
The syntax of rendering an image is almost similar to linking a URL we learned just now. You need to prefix the syntax of a link with a ! symbol to render an image.
Let's use the above syntax to render the logo of my blog,
The output:
We learned about linking and images. Let's learn how to make an image appear as a link. To do that, you need to combine the link and image syntax. You need to use the image syntax in the link syntax's place of LINK_TEXT.
[](hyperlink)
Let's use the my blog's logo to link to my blog's home page,
[](https://blog.greenroots.info)
Clicking on the image below will open up the blog page.
In some of the markdown variants(like GitHub) you can add emojis with the following syntax(Colons : around the emoji name)
:mango: :lemon: :man: :car:
The output
🥭 🍋 👨 🚗
The table is another much-needed data representational format. The table syntax can be a bit overwhelming to start with, but if you pay attention to it, it is easy!
The anatomy goes like this:
| ----------- | ----------- || CELL_TEXT |Now take a look at the table syntax below. You can easily make out the headers Fruit and Emoji. Also the, there are two rows, and each of the rows has two columns(cells)
| Fruit | Emoji |
| ----------- | ----------- |
| Mango | :mango: |
| Lemon | :lemon: |
The Output:
| Fruit | Emoji |
| Mango | 🥭 |
| Lemon | 🍋 |
In the GitHub flavoured markdown, you can quickly align the texts in a table. To do that, you can use a colon(:) on the separators' left, both, and right sides.
:---=> For left align:---:=> For centre align---:=> For the right alignTake a look at the table below, where each of the column texts is differently aligned.
| Fruit(left) | Emoji(center) | Taste(right) |
| :--- | :----: | ---: |
| Mango is the king of Fruits | :mango: | Sweet, and I love it |
| Lemon is good for health | :lemon: | Sour, mix it in the water |
The output:
The syntax to get a horizontal line is by specifying three consecutive hyphens(-).
---
The output:
Did you know you can also write HTML in the markdown files? It is supported in some of the markdown variants like GitHub.
<p align="center">
Yes, you can use the allowed raw HTML in the mark-down file.
This is a paragraph aligned in the centre.
</p>
The output
Yes, you can use the allowed raw HTML in the mark-down file. This is a paragraph aligned in the centre.
Many developers and tech writers want to embed a YouTube video using the markdown syntax. Unfortunately, there is no default syntax for it. However, you can link to a youtube video using its thumbnail image the same way we have learned to link an image.
Here goes the syntax,
[](YOUTUBE_VIDEO_LINK)
Let's do it for one of the videos,
[](https://www.youtube.com/watch?v=OulZeVtZhZQ)
The output:
The last thing we will learn is how to create a table of content in a markdown doc.
Say you have a heading called Unpopular Opinion and want to create a link to that section of the doc. So first, you need to create the kebab case of the heading and use it as a link.
- [Unpopular Opinion](#unpopular-opinion)
That's all for now. You can find all these syntaxes in this Opensource GitHub Repository as well. This repository may also contain additional syntaxes and tips as it grows with contributions.
A ⭐ to the repo will motivate all contributors
Before we end, I will share my knowledge on,
Let's connect,