코딩

[Markdown] 마크다운 정리

Summer_tree 2022. 12. 20. 17:20

728x90

Headings / Styling text / Quoting / Code / Links / Images / List / Task list / Ignoring markdown format / Table / Horizontal rule / Line breaks

마크다운은 간단한 마크업 언어이다.

MS워드처럼 무겁지 않고 가벼우면서 간단한 포맷으로 html 효과를 줄 수 있다.

html의 효과가 더 좋지만 html보다 더 간단한 문법으로 정리할 수 있어 좋다.

내 경우에는 특히 각종 언어와 코딩 팁을 블로그에 정리할 때 유용하다.

티스토리에서 완전하지는 않지만 마크다운을 지원하고 있고, VS Code에서도 사용할 수 있어 편리하다.

마크다운은 정말 편하고 쉽다.

VS Code에서 블로그에 올릴 자료를 마크다운으로 정리하고, 티스토리에서 마크다운으로 올린 다음, html로 최종 정리한다.

단, html로 손질한 부분을 티스토리 마크다운으로 변경하면 html 추가부분이 날아가 버리기도 하는데, 이 부분을 주의해서 마크다운 편집으로 가기 전 html 부분을 VS Code로 복사한 후 작업해야 한다.

아래는 간단히 정리한 마크다운 문법이다.

Markdown

Syntax

마크다운은 각 아이템 별로 한 줄 씩 띄워써야 한다.

두 줄의 공백줄을 넣어도 공백줄을 출력하지 않는다.

빈 줄은 각 아이템의 구분을 뜻한다.

본문에서 공백줄을 넣으면 줄바꿈을 한다.
공백줄 없이 줄바꿈만 하면 이어서 쓰기가 된다.

리스트 등 연관된 아이템들은 공백줄을 넣어주지 않아도 된다.

마크다운에서 지원하지 않는 효과를 주기 위해 필요한 경우 html 태그를 붙일 수도 있다.

# <u>Markdown</u>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Styling text

Bold text

**Bold text**

Bold text

__Bold text__

Italic text

*Italic text*

Italic text

_Italic text_

~~Strikethrough text~~

~~Strikethrough text~~

Bold & nested italic text

**Bold & _nested italic_ text**

All bold and italic

***All bold and italic***

Quoting text

Text

Quote

Nested Quote

Nested Nested Quote

Text

> Quote
>> Nested Quote
>>> Nested Nested Quote

Quoting code

코드블럭을 넣기 위해서는 ```language ... ```로 감싸거나,

코드블럭 앞에 탭 또는 공백 4자를 넣어준다.

Python은 py, Markdown은 md라고만 해도 된다.

code
here

```md
code
here
```

here in line code

here `in line code`

<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>

```html
<a href="https://www.google.co.kr/" 
target="_blank">GOOGLE\</a>
```

.list > li {
  position: absolute;
  top: 40px;
}

```css
.list > li {
    position: absolute;
    top: 40px;
}
```

s = "Python syntax highlighting"
print s

```python
s = "Python syntax highlighting"
print s
```

Links

Markdown.org

[Markdown.org](https://www.markdownguide.org/)

Github Markdown

[Github Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#paragraphs)

Google

[Google](https://google.com "구글로 이동")

Images

![image](https://myoctocat.com/assets/images/base-octocat.svg)

Image link

[![daum](https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png)](https://www.daum.net/)

List

Unordered list

- a
- b
- c

Ordered list

1. a
2. b
3. c

Nested list

a
1. a
2. b
  1. a
  2. b
a
- a
- b
  - a
  - b

1. a
    1. a
    2. b
        1. a
        2. b
2. a
    - a
    - b
        - a
        - b

Task list

Task a
Task b

- [ ] Task a
- [X] Task b

Ignoring markdown format

Let's rename our-new-project

Let's rename *our-new-project*

Let's rename \*our-new-project\*

Table

'|'로 열을 나누고, :-, :-:, -: 로 정렬방법을 정한다.

값	의미	기본값
`static`	유형(기준) 없음 / 배치 불가능	`static`
`relative`	요소 자신을 기준으로 배치
`absolute`	위치 상 부모(조상)요소를 기준으로 배치
`fixed`	브라우저 창을 기준으로 배치

값 | 의미 | 기본값
---|:---:|---:
`static` | 유형(기준) 없음 / 배치 불가능 | `static`
`relative` | 요소 **자신**을 기준으로 배치 |
`absolute` | 위치 상 **_부모_(조상)요소**를 기준으로 배치 |
`fixed` | **브라우저 창**을 기준으로 배치 |

Horizontal rule

밑줄 종류는 시스템에 따라 가능할 수도 불가능할 수도 있다.

(hyphens)

(Asterisks)

(Underscores)

---
(hyphens)
***
(Asterisks)
___
(Underscores)

Line breaks & comments(hidden)

줄을 바꾸기 위해 줄 끝에 문자 2개 이상을 넣거나 </br>을 넣는다.

(줄 끝에 공백 없음)a
(줄 끝에 공백 2개 추가)" " b
c(아래 공백줄 한 줄 추가)

(줄 끝에 공백 2개 추가)" " d
e(아래 공백 한 줄 추가)

br f(끝에 </br> 추가)
g

a
"  " b  
c

"  " d  
e

br f</br>
g

<!-- Comments -->

728x90

저작자표시 비영리 변경금지