코드 — inline 과 fenced block

~10 min · markdown, code, syntax-highlighting

Level 0평문

0 XP0/64 lessons0/12 achievements

0/100 XP to next level100 XP to go0% complete

코드 마크업 세 가지

인라인 코드 는 백틱 하나: `console.log()`. 인라인 코드 자체에 백틱 들었으면 백틱 두 개로 감싸: ``code with `backticks` inside``.

Fenced code block 은 백틱 세 개에 옵션 언어 식별자 추가:

```python
def greet(name):
    return f"Hello, {name}!"
```

들여쓰기 코드 블록 (4 칸 또는 1 탭) 은 옛날 스타일. 언어 힌트 없고 실수로 깨지기 쉬워 — fenced 선호.

중요한 언어 식별자

흔한 것: python, javascript/js, typescript/ts, bash/shell, json, yaml, toml, html, css, sql, rust, go, java, c, cpp, diff, mermaid. 대부분 렌더러가 이걸로 syntax highlighting 테마 골라.

코드에 백틱 세 개 들었을 땐 ~~~ 사용: 대체 fence (~~~) 로 감싸면 fence 마다 escape 안 하고도 백틱 든 Markdown 을 코드 블록에 넣을 수 있어.

Code

인라인 코드·markdown

Use the `console.log()` function.
Double backticks for ``code with `backticks` inside``.

Fenced block + 언어·markdown

```python
def greet(name):
    return f"Hello, {name}!"
```

```bash
curl -s https://api.example.com | jq .
```

Tilde fence (코드에 ``` 들었을 때)·markdown

~~~markdown
This fenced block can contain ```triple backticks``` literally.
~~~

External links

Exercise

이번 주에 쓴 코드 스니펫 골라서 Markdown 파일에 세 가지로 임베드 — 인라인, 들여쓰기 블록, 올바른 언어 식별자 붙인 fenced block. 렌더링하고 비교. 기본 스타일로 어느 걸 쓸지 정해.

Progress

Progress is local-only — sign in to sync across devices.

← Previous링크와 이미지 Next →인용, 가로선, escape

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.