Quick Syntax
```js
console.log("hello");
```
```python
for value in numbers:
print(value)
```
```bash
git status
```fenced code block은 언어 이름을 문법 강조 힌트로만 사용하며 실행·검증을 보장하지 않습니다. 닫는 fence는 여는 fence와 같은 문자이고 길이가 같거나 더 길어야 하며, 내부에 같은 fence가 필요하면 바깥 fence를 더 길게 하거나 tilde fence로 바꿉니다.
문법
언어 지정은 문법 강조의 힌트이지 실행 환경을 의미하지 않는다
fenced code block 시작 줄에 언어 이름을 쓰면 렌더러가 해당 언어의 문법 강조 규칙을 적용한다. 단, 이것은 렌더러에 대한 힌트일 뿐이며 실제 코드를 실행하거나 검증하지는 않는다. 언어 이름을 생략하면 문법 강조 없이 plain text로 표시된다. 언어 이름의 표기는 렌더러마다 지원 목록이 다르므로 javascript 대신 js처럼 짧은 별칭이 더 널리 통용되는 경우도 있다.
```js
// 언어 지정: 문법 강조 적용
const x = 1;
```
```
// 언어 생략: plain text로 표시
const x = 1;
```코드 블록 안에 backtick이 들어갈 때는 fence 길이를 늘려야 한다
삼중 backtick(```)이 기본이지만, 블록 안에 ```가 포함된 예시를 작성해야 한다면 fence를 4개 이상으로 늘리거나 물결표(~~~~)로 교체할 수 있다. 중요한 것은 시작 fence와 종료 fence의 문자가 같고, 종료 fence 길이가 시작 fence 이상이어야 한다는 점이다. 이 규칙을 어기면 렌더러가 블록의 끝을 잘못 인식해 나머지 문서 전체가 코드로 처리되는 심각한 렌더링 오류가 발생한다.
````text
```nested fence example```
이렇게 하면 내부 backtick 3개가 그대로 보입니다.
````새 문서에서는 fence 방식이 코드 경계를 읽기 쉽다
Markdown 초기 방식인 4칸 들여쓰기 코드 블록도 CommonMark가 지원하지만, 언어 지정이 불가능하고 목록 안에서는 들여쓰기 기준을 따로 계산해야 한다. 새 기술 문서에서는 시작과 끝, 언어 힌트를 함께 보이는 fence 방식이 실수하기 쉽지 않다. MDX 표준 문법은 indented code block을 지원하지 않으므로 MDX 코드 예시는 fence로 쓴다.
<!-- 권장: fence 방식 -->
```bash
npm install
```
<!-- 비권장: 들여쓰기 방식 (언어 지정 불가) -->
npm installtext 언어 지정은 비코드 예시의 의도를 드러낸다
출력 예시, 오류 메시지, 파일 경로처럼 특정 언어 문법이 없는 내용은 text 또는 plain을 언어 정보로 적을 수 있다. 언어를 생략해도 되지만, text를 적으면 코드가 아니라 출력이라는 의도가 source에서 분명해진다. 실제 강조 여부와 text·plain 별칭 지원은 renderer의 언어 목록을 따른다.
반대로 실행 가능한 코드인데 언어를 비워 두면 복사성은 유지돼도 가독성이 크게 떨어진다. 코드 예시가 학습용인지 단순 출력 예시인지 먼저 구분하면 js/bash/text 선택이 쉬워진다.
```text
Error: ENOENT: no such file or directory, open 'config.json'
```선택 기준
| 상황 | 적합한 선택 |
|---|---|
| 언어 문법 강조가 필요한 코드 | ```언어명 |
| 강조 없이 plain text 표시 | ```text 또는 언어 생략 |
| 블록 안에 backtick 3개 포함 | fence를 4개 이상으로 늘리거나 ~~~~ 사용 |
| 목록 안 코드 블록 | 들여쓰기 방식 대신 fence 방식 |
| MDX 환경의 코드 블록 | fence 방식 |
| 출력 로그나 에러 메시지 | text 지정 우선 |
주의할 점
코드 안에 backtick이 들어가는 경우 fence 길이를 더 길게 잡아야 합니다. 시작과 종료 fence 길이가 다르면 나머지 문서 전체가 코드 블록으로 처리되는 렌더링 오류가 발생합니다. 예시가 깨지면 문서 신뢰도가 빠르게 떨어지므로 항상 렌더링 결과를 확인하세요.
```js
const query = `
select * from users;
`;
```이런 예시는 문자열 안 backtick과 fence가 섞여 보여 헷갈리기 쉽습니다. fence와 코드 내용을 분리해서 읽고, 필요하면 바깥 fence를 더 길게 잡는 편이 안전합니다.
참고 링크
2 sources