Markdown Cheat Sheet
overview
Markdown is a markup language just like HTML. We use it to parse text and convert it into a specific format. You can also think of it as a text to HTML converter tool.
In this guide we'll cover the following topics.
- • How to create your first markdown file.
- • Create a cheat sheet for markdown
- • Discuss how markdown can be rendered in VS Code
Tools that Support Markdown
Markdown works in any browser even if you use a simple notepad. But there are certain tools that can help enhance your productivity by providing a real time view (of markdown and rich text) side by side.
The following are some of the tools that support working with markdown:
- • VSCode (We'll cover this in this article)
- • Atom
- • Haroopad
- • Sublime text
- • MarkPad
Headings
Headings and Sub-Headings are the most important in any documentation. Heading has different types of levels from Level 1 to Level 6, Just like HTML <h1> to <h6> tag. The syntax for headings starts with # followed by a space. The first level of heading should have one # and so on.
Heading 1 h1
Heading 2 h2
Heading 3 h3
Heading 4 h4
Heading 5 h5
Heading 6 h6
Text Decoration
We have to Highlight some of the text from the other blog or documentation. For that, we can use Bold, Italic, blockquote, and Strikethrough.
Normal Text
bold
italic
strikethrough
blockquote
Ordered List
For Listing in an Ordered manner, we use Ordered List. To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.
- First item
- Second item
- Third item
output
1. First item
2. Second item
3. Third item
Unordered List
To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.
output
- First item
- Second item
- Third item
Code
For describing a word or phrase as code, we have to use backticks (`) on both sides of that word.
output
<html>
<head>
</head>
</html>
Horizontal Rules
*
output: The output of all three looks the same Output:
___________________________________________________
___________________________________________________
___________________________________________________
Links
For creating a link, enclose the link text in brackets [ ] then follow it with the URL in parentheses ( ).
My favorite Tech blogging site is : [Hashnode](https://hashnode.com/)
output:
My Favorite blogging site is :Hashnode
Images
For adding an image we use the exclamation mark (!) and then alt text in brackets [ ] and then path or URL to the image asset in parentheses ( ). We can also add a title in quotation marks after the path or URL, but it's optional.
Escaping Characters
To display a character that is used to format in the Markdown document, we use a backslash () in front of that character.
```* Without the backslash, it would be rendered as a bullet in an unordered list.
**output:**
```*without the backslash, it would be rendered as a bullet in an unordered list.
Tables
For creating a table in markdown we have to use hyphens(---) to create a column header and use pipe (|) to separate each column. For compatibility, you should also add a pipe on either end of the row.
| Syntax | Description |
| Header | Title |
| Paragraph | Text |
Fenced Code Block
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
Footnote
Here's a sentence with a footnote. [^1]
[^1]: This is the footnote.
Heading ID
My Great Heading {#custom-id}
Definition List
term : definition
Strikethrough
The world is flat.
Task List
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
Emoji (see also Copying and Pasting Emoji)
That is so funny! :joy:
Highlight
I need to highlight these ==very important words==.
Subscript
H~2~O
Superscript
X^2^