Markdown Syntax

02 Oct 2020 in Studies on Code-Review

Contents

• Intro
• Design
  • Line
  • Font
  • Header
  • Footnote
  • Quote
• Tricks
  • Image
  • Code
  • URL
  • Table
  • Gif

Intro

Hello, This page is for Markdown syntax review.
Markdown have simple and easy syntax, but highly effective.
So, Markdown have been loved as README file since 2004.

If you have a plan to create your own github pages or jupyter notebook, (or if you already have except markdown) markdown could enrich your github / jupyter notebook quality.

---

Design

At here,

Line

Markdown looks like text file, but

| Markdown[ENTER]
Markdown Markdown[SPACE x 2]
Markdown

Font

Syntax	Result	Remark
__Bold__	Bold	Markdown
*Italic*	Italic	Markdown
_Italic_	Italic	Markdown
___*Bold-Italic*___	Bold-Italic	Markdown
___Bold-Italic___	Bold-Italic	Markdown
~~Strikethrough~~	Strikethrough	Markdown

one time under score is Italic
two times under score is Bold
three times under score is Bold and Italic

As i said, markdown is quite simple. To coloring text, using html .

Syntax	Result	Remark
<span style="color:skyblue">SkyBlue</span>	SkyBlue	Html
<b><span style="color:skyblue">SkyBlue</span>	SkyBlue	Html with <b>
<i><span style="color:skyblue">SkyBlue</span>	SkyBlue	Html with <i>
<b><i><span style="color:skyblue"><B><I>SkyBlue</span>	SkyBlue	Html with <B><I>

Upper & lower character effect same. Other html usages will be uploaded soon…

Header

! Note !
White space should be exist after “#”

Markdown Syntax	HTML	Rendered Output
# Heading level 1	<h1>Heading level 1</h1>	Heading level 1
## Heading level 2	<h2>Heading level 2</h2>	Heading level 2
### Heading level 3	<h3>Heading level 3</h3>	Heading level 3
#### Heading level 4	<h4>Heading level 4</h4>	Heading level 4
##### Heading level 5	<h5>Heading level 5</h5>	Heading level 5
###### Heading level 6	<h6>Heading level 6</h6>	Heading level 6

Footnote

Footnote ¹

Quote

René Descartes said,

1. Cogito, ergo sum.

   1. I think, therefore I am.

      1. 나는 생각한다, 고로 존재한다.

***

Trick

From here, let’s handle some useful tricks for markdown.

URL

[URL Name]("URL Link")

e.g)

   [Github](www.github.com)

Github

Image

![IMAGE NAME]("IMG Link")

e.g)

   ![Github icon](https://avatars1.githubusercontent.com/u/9919?s=200&v=4)

Code

• To make code-block, use ``` at the head and tail of code.

```language

code

```

```python
# python 
for idx, val in enumerate(some_list):
   print(idx, val)
```

# python 
for idx, val in enumerate(some_list):
   print(idx, val)

```go
// go
for idx, val := range some_list{
   fmt.Println(idx, val)
}
```

// go
for idx, val := range some_list{
   fmt.Println(idx, val)
}

how to

Table

Left :— Mid :—: Right : —: ()

| Align Left  |  Align Mid  | Align Right  |
|   :---      | :-----:     | -----:       |
|     *1*     |     *1*     |     *1*      |
|    __2__    |    __2__    |    __2__     |
|      3      |      3      |      3       |

Align Left	Align Mid	Align Right
1	1	1
2	2	2
3	3	3

Actually, making table is quite boring stuff, Table Generater may help you.

---

Images

• Markdown syntax (default size)

  ![GIF](https://drive.google.com/uc?export=view&id=1ji6_t5spHDwKslnbQYmhAsiJ3bh1qc3g)
  

  

• Markdown syntax2

  ![GIF](https://drive.google.com/uc?export=view&id=1ji6_t5spHDwKslnbQYmhAsiJ3bh1qc3g){: width="30%" height="30%"}
  

  

Note, “%” based on full screen that image can show, not a original image size.

• html syntax (400x400)

  <img src="https://drive.google.com/uc?export=view&id=1ji6_t5spHDwKslnbQYmhAsiJ3bh1qc3g" width="400" height="400" />
  

  

Done!

If you want to try to write Markdown at Visual Code,
Right Click your md file and Select Open Preview (Ctr+Shift+V)

You could try Markdown Tutorial

1. Footnote 1 ↩