Home 마크다운 사용법
Post
Cancel

마크다운 사용법

Posted Aug 20, 2022 Updated Nov 2, 2022
how to use...
how to use...
By Cotes Chung , Keumbi Park
10 min read

이 페이지는 내가 사용한 블로그 테마 Chirpy,의 Text and Typography를 기본으로 작성했다. 블로그 작성 시 제목 규칙, 리스트 샘플을 확인할 수 있다.

제목(Titles)

H1 - heading

H2 - heading

H3 - heading

H4 - heading

H1 - heading

H2 - heading

H3 - heading

H4 - heading


1
2
3
4
5
6
7
8
9
10
11
12
13
14

---
<hr> 요소는 이야기 장면 전환, 구획 내 주제 변경 등,
문단 레벨 요소에서 주제의 분리를 나타냅니다.
---
# H1 - heading
## H2 - heading
### H3 - heading
#### H4 - heading

<h1 data-toc-skip>H1 - heading</h1>
<h2 data-toc-skip>H2 - heading</h2>
<h3 data-toc-skip>H3 - heading</h3>
<h4>H4 - heading</h4>
---

문단(Paragraph)

I wandered lonely as a cloud

That floats on high o’er vales and hills,

When all at once I saw a crowd,

A host, of golden daffodils;

Beside the lake, beneath the trees,

Fluttering and dancing in the breeze.

목록

정렬된 목록(Ordered list)

  1. Firstly
  2. Secondly
  3. Thirdly
1
2
3

1. Firstly
2. Secondly
3. Thirdly

정렬되지 않은 목록(Unordered list)

  • Chapter
    • Section
      • Paragraph
1
2
3

- Chapter
  - Section
    - Paragraph

작업 목록(Task list)

  • 할일 목록
  • 완료
  • Defeat COVID-19
    • Vaccine production
    • Economic recovery
    • People smile again
1
2
3
4
5
6
7
8


- [ ] TODO
- [x] Completed
- [ ] Defeat COVID-19
  - [x] Vaccine production
  - [ ] Economic recovery
  - [ ] People smile again

설명 목록(Description list)

Sun
the star around which the earth orbits
Moon
the natural satellite of the earth, visible by reflected light from the sun
1
2
3
4
5
6
7

Sun
: the star around which the earth orbits

Moon
: the natural satellite of the earth, visible by reflected light from the sun

인용 블록(Block Quote)

인용문 을 사용할 때의 예시 입니다.

1

> _인용문_ 을 사용할 때의 예시 입니다.

프롬프트(Prompts)

이 예제는 팁 아이콘을 사용한 프롬프트 입니다.

이 예제는 정보 아이콘을 사용한 프롬프트 입니다.

이 예제는 경고 아이콘을 사용한 프롬프트 입니다.

이 예제는 위험 아이콘을 사용한 프롬프트 입니다.

1
2
3
4
5
6
7
8
9
10
11

> 이 예제는 `팁` 아이콘을 사용한 프롬프트 입니다.
{: .prompt-tip }

> 이 예제는 `정보` 아이콘을 사용한 프롬프트 입니다.
{: .prompt-info }

> 이 예제는 `경고` 아이콘을 사용한 프롬프트 입니다.
{: .prompt-warning }

> 이 예제는 `위험` 아이콘을 사용한 프롬프트 입니다.
{: .prompt-danger }

테이블(Tables)

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Island TradingHelen BennettUK
Magazzini Alimentari RiunitiGiovanni RovelliItaly
1
2
3
4
5
6
7

| Company                      | Contact          | Country |
|:-----------------------------|:-----------------|--------:|
| Alfreds Futterkiste          | Maria Anders     | Germany |
| Island Trading               | Helen Bennett    | UK      |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |

http://127.0.0.1:4000

깃허브 블로그 페이지 이동

깃허브 블로그 페이지 이동 새창으로 링크 열기 {} 사이에 html attribute 넣어 사용 가능

1
2
3
4

<http://127.0.0.1:4000>
[깃허브 블로그 페이지 이동](https://keumbi.github.io/)
<!-- 새창으로 링크 열기 -->
[깃허브 블로그 페이지 이동](https://keumbi.github.io/){:target="_blank"}

각주(Footnote)

옆에 훅을 클릭 시 하단 각주로으로 이동합니다.1, 또 다른 각주 예제22.

1

옆에 훅을 클릭 시 하단 각주로으로 이동합니다.[^footnote], 또 다른 각주 예제2[^fn-nth-2].

이미지

  • 기본 (설명과 함께)

Desktop View 전체 영역 넓비에 가득 차고, 가운데 정렬인 이미지

1
2

![Desktop View](https://i.giphy.com/media/QJvwBSGaoc4eI/giphy.webp){: width="972" height="589" }
_Full screen width and center alignment_


  • Shadow

Window shadow shadow effect (visible in light mode)

1
2

![Window shadow](https://i.giphy.com/media/QJvwBSGaoc4eI/giphy.webp){: .shadow width="1548" height="864" style="max-width: 90%" }
_shadow effect (visible in light mode)_


  • Left aligned

Desktop View

1

![Desktop View](https://i.giphy.com/media/QJvwBSGaoc4eI/giphy.webp){: width="972" height="589" style="max-width: 70%" .normal}


  • Float to left

    Desktop View “A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space.”

    1
2
3

    이미지 왼쪽 정렬
 ![Desktop View](https://i.giphy.com/media/QJvwBSGaoc4eI/giphy.webp){: width="972" height="589" style="max-width: 200px" .left}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."


  • Float to right

    Desktop View “A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space.”

    1
2
3

    이미지 오른쪽 정렬
![Desktop View](https://i.giphy.com/media/QJvwBSGaoc4eI/giphy.webp){: width="972" height="589" style="max-width: 200px" .right}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."


Mermaid SVG

 gantt
  title  Adding GANTT diagram functionality to mermaid
  apple :a, 2017-07-20, 1w
  banana :crit, b, 2017-07-23, 1d
  cherry :active, c, after b a, 1d

Mathematics

The mathematics powered by MathJax:

\[\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}\]

When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are

\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

Inline code

This is an example of Inline Code.

1

This is an example of `Inline Code`.

Filepath

Here is the /path/to/the/file.extend.

1

Here is the `/path/to/the/file.extend`{: .filepath}.

Code block

Common

1

This is a common code snippet, without syntax highlight and line number.

Specific Languages

Console

1
2
3

$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash

Shell

1
2
3
4

if [ $? -ne 0 ]; then
    echo "The command was not successful.";
    #do the needful / exit
fi;

Specific filename

1
2
3

@import
  "colors/light-typography",
  "colors/dark-typography"

이모티콘

💪:muscle:🦾:mechanical_arm:🕛:clock12:🕧:clock1230:🔥:fire:👏:clap:🙌:raised_hands:👐:open_hands:🤲:palms_up_together:🤝:handshake:🙏:pray:👌:ok_hand:🤞:crossed_fingers:👋:wave: 😂:joy: 😭:sob: 💩:poop: ❤️:heart: 💥:boom: 💯:100: 💢:anger:💬:speech_balloon: 💫:dizzy: 💦:sweat_drops: 👉:point_right:🖕:fu: 👈:point_left:

1
2
3
4
5
6

:muscle: :mechanical_arm:
:clock12: :clock1230: :fire:
:clap: :raised_hands: :open_hands: :palms_up_together: :handshake:
:pray: :ok_hand: :crossed_fingers: :wave: :joy: :sob:
:poop: ️:heart: :boom: :100: :anger: :speech_balloon:  :dizzy:
:sweat_drops: :point_right: :fu: :point_left:

개행

강제로 개행 하기 위해서 첫줄에 마지막에 빈칸 두칸을 추가하고 나머지 줄을 작성 하면 됩니다.

1
2

강제로 개행 하기 위해서 첫줄에 마지막에 빈칸 두칸을 추가하고 (<-- two spaces)
나머지 줄을 작성 하면 됩니다.

First line with two spaces after. And the next line.

First line with the HTML tag after.
And the next line.

1
2
3
4
5

First line with two spaces after.
And the next line.

First line with the HTML tag after.<br>
And the next line.

각주 연결(Reverse Footnote)

1
2

[^footnote]: 각주에 대한 설명
[^fn-nth-2]: 각주 예제2 설명

Reference

Linebreak

Markdown guide

  1. The footnote source ↩

  2. The 2nd footnote source ↩

How to...
typography markdown chirpy
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents

Section1, Week1, Day 1 TIL

Section1, Week2, Day 2 TIL

Comments powered by Disqus.