If you've been into web development, you would probably know about Markdown or at least some of the syntax. In this blog, I’ve covered the basics of Markdown. This blog is for beginners as well as for people who have used markdown but may not know the entire syntax and what you can do with it. Here, we will talk about what is markdown and what it's used for; then, we'll jump into VS code with the markdown preview extension and create a kind of cheat sheet that you can use for future reference. If you want to learn about Web Development, then do visit the Online Web Development course.
What is Markdown?
Markdown is a lightweight markup language that describes how text should look on a page. HTML is another example of a markup language. Markdown is a style of writing documents that makes it easy to define what the content should look like. It describes headers, text styles, links, lists and so much more.
Markdown is used in documentation, articles, and notes and can even be used to build a webpage. If you use GitHub, you'll be familiar with the “readme.md” files that show up in the root of a repository. That “md” stands for markdown. You can even create a readme on your GitHub profile to customize your GitHub profile page. Example of GitHub readme.md file:
- It's a very readable syntax and it can be converted into HTML, XHTML as well as in other formats. Its main purpose is readability and ease of use.
- Markdown Editors: You can write markdown in any text editor, Markpad, HarooPad, MarkdownPad2 and Typora, but it's really nice to have something that gives you a preview of what it is going to look like. So what we are going to use is Visual Studio Code(VS Code) with an extension called “Auto Open Markdown Previewer''. Given below is the image of the extension that we are going to use:
Why Should You Use Markdown?
- Simple Learning Curve: Markdown is very simple to learn. The official syntax can be found on the website: daringfireball. However, you need to know that typing *word* will make it bold, typing _word_ will change that word to italics, and adding a - sign before the word will create lists. Also, it is much easier to read raw Markdown than raw HTML.
- Easy HTML Conversion: Markdown has built-in software to convert a plain text to HTML. Hence it can also be considered as a text-to-HTML conversion software in addition to being a markup language.
- Create Static Sites Easily: Markdown empowers you to make free, simple, and static sites utilizing open-source tools like Mkdocs, Jekyll, or Read the Docs.
- Easy Sharing and Syncing: You can easily sync and share files created in the Markdown editor to Dropbox, Google Drive, and WordPress.
- Diversification: Since Markdown is just plain text, it can be converted into a bunch of formats like PDF, epub, Docx, HTML, etc. To acquire in-depth skills in web development, visit KnowledgeHut’s online Web Development Course and learn development from scratch.
How Does Markdown Work?
Working of Markdown can be explained in the following four steps:
- Create Markdown file: The first step is to create a Markdown file with “.md” or “.markdown” extension.
- Open File in Markdown Application: You need a Markdown application capable of processing the Markdown file. There are lots of applications available such as Typora, Ghostwriter, etc.
- Working of Markdown Application: Markdown applications use Markdown processors to take the Markdown-formatted text and output it to HTML format.
- View the file in a web browser: The final rendered output of your document can now be viewed in a web browser. Following is the visual representation of the process:
Markdown Syntax- A Quick Primer (with Example)
Following are some basic syntax for markdown. This is a quick markdown guide:
1. Headings
For adding headings in Markdown, we use the hashtag sign. For the h1 heading, we add one hashtag. For the h2 heading, we add two hashtags, and so on. Given below is an example program to add headings in Markdown:
# This is h1 heading
## This is h2 heading
### This is h3 heading
Output:
2. Italics
To make text italics, we would use either single asterisks or use single underscores. Given below is an example program to italicize text in Markdown:
*This is first way to make text in italics*
_This is second way to make text in italics_
Output:
3. Bold
If we want some strong text (or bold text), we can use double asterisks or we can also use double underscores which will make it bold as well. Given below is an example program to make bold text in Markdown:
**This is first way to make text in bold**
__This is second way to make text in bold__
Output:
4. Strikethrough
For strikethrough, we can use the double tilde sign. Given below is an example program for strikethrough text in Markdown:
~~Strikethrough text example~~
Output:
5. Horizontal Line
A horizontal line acts like a separator, and for that, we use triple hyphens or triple underscores. You can use this to separate your content. Given below is an example program for adding a horizontal line in Markdown:
<!-- First Method to add Horizontal Line -->
This is text before Horizontal Line
___
This is text after horizontal line
<!-- Second Method to add Horizontal Line -->
This is text before Horizontal Line
---
This is text after horizontal line
Output:
6. Blockquote
For inserting a block quote, we use the greater symbol. It gives us a light background and blue line on the left side. Given below is an example program for adding blockquote in Markdown:
<!-- Adding Blockquote -->
>This is a blockquote
7. Markdown Hyperlink
Text which we want to use for the hyperlink goes in square brackets, and the link will go in round brackets. Given below is an example program for adding links in Markdown:
<!-- Adding Link with sample text -->
[Upgrad](https://www.upgrad.com/)
8. Unordered List
Adding an unordered list in Markdown is very easy. Just add one asterisk mark symbol for each item. Given below is an example program for adding an unordered list in Markdown:
<!-- Unordered List -->
* First Item
* Second Item
* Third Item
9. Ordered List
Adding an ordered list in Markdown is similar to adding an unordered List. We need to write 1 before each item. Given below is an example program for adding an ordered list in Markdown:
<!-- Ordered List -->
1. First Item
1. Second Item
1. Third Item
Output:
10. Markdown Image
The process of adding links is very similar to adding links, except we need to put an exclamation in front of our brackets. Given below is an example program for adding the image in Markdown:
<!-- Ordered List --
1. First Item
1. Second Item
1. Third Item
Output:
11. Markdown Code Blocks
For adding code blocks, we can use triple backticks. You can also specify syntax-specific code blocks. Given below is an example program for adding Code Blocks in Markdown:
<!-- Adding Code -->
```
print("This is syntax specific code block")
```
<!-- Adding Syntax Specific Code -->
```Python
print("This is syntax specific code block")
```Output:
12. Markdown Tables
Tables in Markdown can get pretty complex, so we are just going to create a simple table because this is generally what we will need. To create a table we need a pipe symbol and a bunch of dashes to create a divider. Given below is an example program for adding Tables in Markdown:
<!-- Tables -->
| Product | Company | Price |
|---------- |:-------------: |------: |
| Product 1 | Company 1 | $1600 |
| Product 2 | Company 2 | $1700 |
| Product 3 | Company 3 | $1800 |
Output:
| Element | Markdown Syntax |
|---|
| Heading | # H1
## H2
### H3 |
| Bold | **bold text** |
| Italic | *italicized text* |
| Blockquote | > blockquote |
| Ordered List | - First item
- Second item
- Third item
|
| Unordered List | - First item
- Second item
- Third item
|
| Code | Code |
| Horizontal Rule | --- |
| Link | [title](https://www.example.com) |
| Image |  |
How to Use Markdown Practically? [Step-by-Step]
For a deeper understanding of Markdown, we are going to create a small Markdown project, which is a portfolio. If you're a developer, it's time to create your own GitHub portfolio readme which is something new to GitHub, allowing you to have an account with a portfolio that looks a little bit more interesting than just the generic one available through GitHub.
Step 1: Introduction
Firstly we are going to write a small introduction about ourselves:
<!-- Introduction -->
## Hi there
<p> Hello Everyone I Am Abhinav Kumar A B-Tech (Information Technology) Student At Netaji Subhas University Of Technology. Fields Related To Computers And IT, Like Web And App Development, Cyber Security Has Always Fascinated Me A Lot. </p>
Output:
Step 2: Adding GitHub Stats
Now that we have a little bit of content, we will add some statistics to our portfolio. We can do this using the repository “GitHub readme stats”. What we will need to do is copy over this example in the repository and simply swap out the username here with our own username.
<!-- GitHub Stats -->
[](https://GitHub.com/anuraghazra/GitHub-readme-stats)
Output:
Step 3: Adding Skills with Emojis
We will add some skills here with icons that will look something a little bit more interesting. We will need an extension called “Emojisense” in VS code for adding emojis. Put the desired emoji's name between two colons after installing the emojisense extension in VS Code.
<!-- Skills -->
# **My Skills**
:mobile_phone_off: Android Development<br>
:desktop_computer: Front-end Web Development<br>
:pencil: Technical Content Writing
Output:
Step 4: Adding Known Languages
We will add some known Programming Languages here in an unordered list.
### Programming Languages
* Java
* Kotlin
* HTML / CSS
* JavaScript
Output:
Step 5: Adding Socials with Links
Finally, we'll include our social media links with their associated images. Create an assets folder, download all the social media icon images, and save them in the folder.
<!-- Social media -->
# **Connect With Me**
<a rel="nofollow" href="https://hashnode.com/@abhinav2108"><img src="assets/hashnode.svg" alt="@abhinav2108" height="30" width="40" /></a>
<!-- Twitter -->
<a rel="nofollow" href="https://twitter.com/abhinavkr_2108"><img src= "assets/twitter.svg" alt="abhinavkr_2108" height="30" width="40" /></a>
<!-- LinkedIn -->
<a rel="nofollow" href="https://linkedin.com/in/abhinav-kumar-3451281a0" ><img src= "assets/linkedin.svg" " alt="abhinav-kumar-3451281a0" height="30" width="40" /></a>
<!-- Instagram -->
<a rel="nofollow" href="https://instagram.com/abhinav.2108"><img src= "assets/instagram.svg" alt="abhinav.2108" height="30" width="40" /></a>
Source: GitHub Markdown Best Practices
Following are some best practices that need to be followed while writing Markdown codes.
- Headings: In Markdown, a blank line should always come before and after a heading
- Line breaks: In Markdown, there are two ways to begin a new line: by adding the <br> tag or by adding a backslash. Since not all Markdown applications support backslash, it is better to use the <br> tag.
- Bold Text: There are two ways to bold text in Markdown, by using double asterisk(*) marks or by using double underscores. Since applications for Markdown conflict on how to treat underscores in the middle of words, it is suggested to use asterisk sign.
- Italic Text: It is recommended to use the asterisk sign for italic text similarly to bold text.
- Blockquotes: Blockquotes should have blank lines before and after them for better readability.
- Ordered Lists: Adding round parentheses after the number allows you to create ordered lists in some markup applications, but not all of them support this. Therefore, it is advisable to add a dot after the number.
- Unordered Lists: Markdown supports several symbols, including plus(+), asterisk(*), and hyphens(-), that can be used to create unordered lists. However, it is advised to pick just one symbol and use it entirely.
You can join a Full Stack Developer Training to begin your journey appropriately. In this course, you will learn about the domain and get hands-on knowledge of different concepts.
Unlock Your Potential with the Best Python Certification. Master the Language of the Future and Open Doors to Endless Opportunities. Start Your Journey Today!
Following are some advice and tips related to markdown which may be helpful when using markdown:
1. Markdown Table Generator: As discussed earlier tables in Markdown can get pretty complex. This is where Markdown Table Generators come into play. They don't require us to write a single line of code in order to generate tables. Steps that need to be followed while using Markdown Table Generators:
a. Visit the following website: Markdown Table Editor and Generator - Table Convert Online
b. Select the number of rows and columns from the Table Editor Dropdown.
Source: tableconvert.com c. It will now generate the required code for the table. Select “Copy to Clipboard” option as shown and paste the code in any code editor you use
Source: tableconvert.com
2. Python Markdown: Python Markdown is a Python implementation of John Gruber’s Markdown. It was developed for the following goals:
a. To maintain a Python library suitable for usage in web server deployments as a markdown implementation.
b. Provide an Extension API that makes it possible to change and/or extend the behavior of the parser.
c. There are two ways of installing python markdown:
- Via Terminal: Just type the following command in the terminal or command line:
pip install markdown
- Via Repository: Clone the following repository by typing the following command in the terminal or command line:
pip install git+https://GitHub.com/Python-Markdown/markdown.git
3. Confluence Markdown: Confluence is a tool (by Atlassian)l for collaboration that allows users to create, read, and share material, which can consist of photographs, text documents, PDFs, charts, tables, and other things, and it is all stored inside spaces. By following the mentioned steps, you can use Markdown in Confluence as well:
a. Visit the following website: Atlassian Markdown and create your site on confluence (It is free for up to 10 users)
b. Visit Atlassian Marketplace and search for markdown
c. Install the following extension:
Source: marketplace.atlassian.com
Conclusion
In this post, I talked about what is markdown, why I like using it, and how it works. Then we had a discussion about the Markdown syntax and created a mini-project in order to better understand markdown syntax. Finally, we talked about certain recommended practices that must be followed when working on a markdown project.
Frequently Asked Questions (FAQs)
1. What does Markdown mean in HTML?
Markdown is a lightweight markup language used to format plain text. In HTML, it is interpreted as a way to structure and style content. It simplifies formatting tasks by using simple syntax for headings, lists, and more.
2. What is Markdown used for?
Markdown is commonly employed for creating web content, including documentation and README files, offering a simple and readable way to style text without complex coding. Markdown is widely supported and compatible with various platforms and applications.
3. What is the difference between markup and Markdown?
| Markup | Markdown |
|---|
| Markup is a notation that is used to annotate text in a document to provide details on the text's structure or instructions for how it should be displayed. | Markdown is a plain text formatting syntax that converts the plain text formatting to HTML. |
4. How do you write text in Markdown?
There are two ways to write text in markdown:
- One way is to just type the desired content as one would on another text editor, such as MS Word.
- Another way is that one can add and close a paragraph tag and write the text within these paragraph tag Example: <p> This is text </p>
5. What is another term for Markdown?
Another term for Markdown is "John Gruber's Markdown," named after its creator. It's a lightweight markup language used for formatting plain text, widely adopted for web content and documentation. The file extension for Markdown files is often ".md."
.png&w=3840&q=75)
