Markdown tutorial fundamental
Markdown is a clean and neat text file for writing HTML without typing HTML that human can read the content easily from source markdown file. HTML is the file for a browser to display the content but human cannot read the content easily.
We assume you have already have VS Code installed and understand how to use Markdown in VS Code https://www.teachonetofish.net/vs-code-markdown-guide/(opens in a new tab.
Comments
A comment is a programmer-readable explanation or annotation. Moreover, you can hide some text without deleting the code. Markdown uses standard HTML comment tags.
<!-- This content will not appear -->
Line Breaks
Hit once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You’ll soon learn to get what you want. “Markdown Toggle” is your friend
Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
Paragraphs
You can create a new paragraph by leaving a blank line between lines of text.
Line 1
Line 2
Horizontal Rule
Three or more Hyphens, Asterisks, Underscores.
---
Hyphens
***
Asterisks
___
Underscores
Headers
Headers are frequently used on websites to emphasize the importance of the sentence of the coming section.
To create a heading, add one to six # symbols before your heading text. The number of # you use will determine the size of the heading.
# This is header one
## This is header two
### This is header three
#### This is header four
##### This is header five
###### This is header six
Styling text
You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text in comment fields and .md files.
Bold
Just like word, you can make the text bold. Bold the word by adding double asterisk or double underline before and after the words.
This is **bold** and __bold__ text.
Italic
Just like word, you can make the text italic. Italic the word by adding single asterisk or single underline before and after the words.
This is *italic* and _italic_ text.
Bold and Italic
If you want to make the word bold and italic, you can add triple asterisk.
This is ***bold and italic*** text.
Strikethrough
Just like word, you can strikethrough the text by adding double tilde.
This is ~~strikethrough~~ text.
All together
We can put all together in one sentence.
In Markdown, we can **Bold**, *Italic*, ***All bold and italic*** ~~Strikethrough~~.
Ignoring formatting
You can ignore the Markdown formatting by using \ before the Markdown character. We call that the escape character.
We can escape \**bold\** to \*italic\* by adding \.
Quote
We use a >
to add a quote text.
This is not a quote
This is a quote
Quoting code
You can use quoting code to show the text in a sentence or a block of the coding code or output result by a single backticks. You can also press the Command+E (Mac) or Ctrl+E (Windows/Linux) keyboard shortcut to insert the backticks for a code block within a line of Markdown.
This is `quoting code` in a sentence.
You can use quoting code to show the block of the coding code or output result by a triple backticks.
Coding code block:
```
git clone
git commit
git push
```
git clone
git commit
git push
Quadruple backticks
To display triple backticks in a fenced code block, wrap them inside quadruple backticks.
```` ``` Look! You can see my backticks. ``` ````
Language specific
We can add language hint in after the opening backtick to show the code with color refer to that language.
```sh
ls -al
```
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
```python
s = "Python syntax highlighting"
print s
```
Link
You can create a link by put a http or https link in the text directly or put the link inside the <>(greater than and less than symbol).
https://www.teachonetofish
<https://www.teachonetofish>
If you want to show the link with different text, you can add a link by wrapping link text in brackets [ ], and then wrapping the URL in parentheses ( ) like this.
[Description](link)
[Teach One To Fish](https://www.teachonetofish)
Image
You can display an image by adding ! and wrapping the alt text in [ ]. Then wrap the link for the image in parentheses ().

List
Unordered list
You can make an unordered list by preceding one or more lines of text with symbol *(asterisk), -(minus) or +(plus). No need to be the same symbol within a list.
- Item 1
* Item 2
+ Item 3
* Item 4
Ordered list
To order your list, precede each line with a number. Ordering numbers are not important, list will be generated in order but the first item will be the first number.
1. Item 1
2. Item 2
3. Item 3
2. Item 4
Nested Lists
You can create a nested list by indenting one or more list items below another item.
1. Item 1
* item 1.1
1. item 1.1.1
1. item 1.1.2
* item 1.2
* item 1.3
Checkbox
Checkbox are created by a hyphen and space followed by [ ]. To check a checkbox by defaul, use [x].
- [ ] Item 1
- [x] Item 2
- [ ] Item 3
Emoji
You can add emoji to your writing by typing :EMOJICODE:.
:+1: