마크다운에서 코드 예제 작성하기 3

마크다운에서는 코드 블록을 사용하여 코드를 예쁘게 표시할 수 있습니다. 이 포스트에서는 TypeScript와 JavaScript 코드를 마크다운에 포함하는 방법을 알아보겠습니다. 3

기본 코드 블록 작성법

코드 블록은 백틱(`) 세 개로 시작하고 끝납니다. 언어를 지정하면 구문 강조(syntax highlighting)가 적용됩니다.

JavaScript 코드 예제

// JavaScript 예제
function greet(name) {
  return `안녕하세요, ${name}님!`;
}

// 함수 호출
const message = greet("홍길동");
console.log(message); // "안녕하세요, 홍길동님!" 출력

TypeScript 코드 예제

// TypeScript 예제
function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}

// 인터페이스 정의
interface User {
  id: number;
  name: string;
  email?: string; // 선택적 속성
}

// 클래스 정의
class UserService {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getUserById(id: number): User | undefined {
    return this.users.find((user) => user.id === id);
  }
}

// 제네릭 사용 예제
function getFirstItem<T>(items: T[]): T | undefined {
  return items.length > 0 ? items[0] : undefined;
}

인라인 코드

문장 내에 코드를 포함하고 싶을 때는 백틱() 하나로 감싸면 됩니다. 예를 들어, const name = "홍길동";`과 같이 표시됩니다.

코드 블록에 줄 번호 추가

일부 마크다운 렌더러에서는 코드 블록에 줄 번호를 추가할 수 있습니다. 다음과 같이 작성합니다:

// 줄 번호가 있는 TypeScript 코드
function factorial(n: number): number {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

코드 블록에 특정 줄 강조

특정 줄을 강조하고 싶을 때는 다음과 같이 작성할 수 있습니다:

// 첫 번째 줄과 3-4번째 줄이 강조됩니다
function sum(numbers: number[]): number {
  return numbers.reduce((total, num) => {
    return total + num;
  }, 0);
}

마크다운 내에서 코드 블록 작성 방법

마크다운 파일에서 코드 블록을 작성하는 방법을 보여주려면 백틱을 더 많이 사용하거나 다른 문자로 감싸야 합니다. 예를 들어:

```javascript
function example() {
  return "이것은 코드 블록입니다";
}
```

위와 같이 작성하면 마크다운 내에서 코드 블록을 표시하는 방법을 설명할 수 있습니다.

결론

마크다운에서 코드를 예쁘게 표시하는 방법은 매우 간단합니다. 백틱 세 개로 코드 블록을 만들고 언어를 지정하면 됩니다. 이를 통해 블로그 포스트나 문서에서 코드를 더 읽기 쉽게 표현할 수 있습니다.