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 ().

![My Logo](https://www.teachonetofish.net/wp-content/uploads/teachonetofish-sitelogo-64.png)

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:

Markdown tutorial advanced