코드 블록이 있는 Markdown 파일 만들기
팁
잘 포맷팅된 Markdown 코드 블록은 문서를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다.
기본 코드 블록
인라인 코드
인라인 코드에는 단일 백틱을 사용하세요:
- 단일 단어:
변수 - 여러 단어:
함수 매개변수 - 기호 포함:
npm install 패키지-이름
구분된 코드 블록
여러 줄 코드에는 삼중 백틱을 사용하세요:
이것은 기본 코드 블록입니다
구문 강조가 없습니다
언어별 구문 강조
여는 백틱 뒤에 언어 이름을 추가하세요:
const greeting = '안녕하세요, 세계!';
console.log(greeting);
def greet(name):
print(f"안녕하세요, {name}님!")
고급 포맷팅
줄 번호
일부 Markdown 프로세서는 줄 번호를 지원합니다:
// 이 줄은 강조됩니다
const x = 1;
// 이 줄들은 강조됩니다
// 이 줄도 마찬가지입니다
const y = 2;
제목 표시줄
코드 블록에 제목을 추가하세요:
app.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('안녕하세요, 세계!');
});
차이점 블록
diff 구문으로 코드 변경 사항을 표시하세요:
- const oldCode = '제거될 예정';
+ const newCode = '추가될 예정';
const unchanged = '그대로 유지';
MDX 기능
대화형 코드 블록
- JavaScript
- Python
// JavaScript 예제
function add(a, b) {
return a + b;
}
# Python 예제
def add(a, b):
return a + b
라이브 코드 예제
function Button() {
return (
<button onClick={() => alert('클릭됨!')}>
클릭하세요
</button>
);
}
일반적인 언어
웹 개발
index.html
<!DOCTYPE html>
<html>
<head>
<title>예제</title>
</head>
<body>
<h1>안녕하세요, 세계</h1>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
app.ts
interface User {
name: string;
age: number;
}
const user: User = {
name: "John",
age: 30
};
백엔드 개발
Main.java
public class Main {
public static void main(String[] args) {
System.out.println("안녕하세요, 세계!");
}
}
query.sql
SELECT users.name, orders.order_date
FROM users
JOIN orders ON users.id = orders.user_id
WHERE orders.status = '완료';
모범 사례
1. 일관된 포맷팅
✅ 권장:
# 제목
## 섹션
\```javascript
// 여기에 코드
\```
❌ 비권장:
#제목
##섹션
\```javascript
//여기에 코드
\```
2. 명확한 언어 지정
✅ 권장:
\```python
def example():
pass
\```
❌ 비권장:
\```
def example():
pass
\```
3. 올바른 들여쓰기
✅ 권장:
- 목록 항목
\```javascript
const x = 1;
\```
❌ 비권장:
- 목록 항목
\```javascript
const x = 1;
\```
특수 사례
쉘 명령어
명령줄 지침의 경우:
# 출력이 있는 명령어
$ npm install 패키지
패키지 설치 중...
완료!
환경 변수
.env
API_KEY=your_api_key_here
DATABASE_URL=postgres://user:pass@localhost:5432/db
구성 파일
package.json
{
"name": "project",
"version": "1.0.0",
"scripts": {
"start": "node index.js"
}
}
문제 해결
일반적인 문제
-
코드 블록 내부의 백틱
\`\`\`
인라인 코드에는 \`를 사용하세요
\`\`\` -
줄 바꿈
이것은 줄 바꿈을 만들기 위해
두 개의 공백이 필요합니다 -
이스케이프 문자
\* 목록 항목이 아닙니다
\` 인라인 코드가 아닙니다
에디터 통합
Cursor 단축키
| 동작 | 단축키 |
|---|---|
| 코드 블록 | Ctrl + Shift + K |
| 인라인 코드 | Ctrl + ` |
| 미리보기 | Ctrl + Shift + V |
확장 프로그램
권장 Markdown 확장 프로그램:
- Markdown All in One
- markdownlint
- Markdown Preview Enhanced
팁
실시간으로 포맷팅을 확인하려면 Cursor의 Markdown 미리보기 기능을 사용하세요!