Quick Guide - Markdown 사용법

2024년 3월 4일

📚 astro

👉 Quick Guide - Markdown 사용법

Heading 태그

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

이미지 태그

![Alt text](./full/or/relative/path/of/image)

텍스트 스타일

- 스타일을 확인해보세요. **볼드** 문자열
- 스타일을 확인해보세요. ___이태릭___ 문자열 
- 스타일을 확인해보세요. ~~취소선~~

스타일을 확인해보세요. 볼드 문자열
스타일을 확인해보세요. 이태릭 문자열
스타일을 확인해보세요. ~~취소선~~

각주

각주[^1]
[^1]: 이 라인이 있어야 스타일이 자동 적용됨. 페이지 맨 밑에 표시

각주¹

인용 구문

> 왼쪽에 파란색 바가 보입니다 <br/>
> br 태그를 써서 여러줄을 쓰면 이어져요

왼쪽에 파란색 바가 보입니다
br 태그를 써서 여러줄을 쓰면 이어져요

표

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Italics	Bold	Code
italics	bold	`code`

코드

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
```

리스트

```markdown
1. 일
2. 이
3. 삼
```

```markdown
- 과일
  - 사과
  - 바나나
- 채소
  - 감자
    - 감자튀김
    - 고로케
  - 고구마
```

과일
- 사과
- 바나나
채소
- 감자
  - 감자튀김
  - 고로케
- 고구마

Gist 적용하기

```gist
declue/0adbcb128831725f57409e051c3810af
```

Mermaid

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

graph TD; A-->B; A-->C; B-->D; C-->D;

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

이 라인이 있어야 스타일이 자동 적용됨. 페이지 맨 밑에 표시 ↩

이전 포스트

JHL-Astro의 주요 기능

2024년 2월 25일

이 블로그에 적용된 기능들