마크다운 코드 하이라이트, 개발 블로그의 필수 기능

개발 블로그나 기술 문서를 작성할 때 코드를 효과적으로 보여주는 것은 매우 중요하다. 마크다운의 코드 하이라이트 (Syntax Highlighting) 기능은 이러한 요구를 충족시켜주는 강력한 도구이다. 이 기능을 사용하면 코드를 시각적으로 돋보이게 하여 독자가 내용을 더 쉽게 이해할 수 있도록 돕는다.

1. 코드 블록의 기본

마크다운에서 코드를 표현하는 방법은 크게 두 가지이다.

인라인 코드: 문장 중간에 짧은 코드 조각이나 변수명을 포함할 때 사용한다. 백틱(`) 하나로 감싸서 표현한다. 예를 들어, print("Hello")와 같이 작성한다.
블록 코드: 여러 줄의 코드를 보여줄 때 사용한다. 세 개의 백틱(```)으로 코드 블록의 시작과 끝을 표시한다. 이 블록 코드에 언어 이름을 명시하면 코드 하이라이트가 적용된다.

2. 코드 하이라이트 적용하기

코드 하이라이트를 적용하는 방법은 간단하다. 블록 코드 시작을 알리는 백틱 세 개 바로 뒤에 프로그래밍 언어의 이름을 작성하면 된다.

Python 코드 예시:

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

print(greet("World"))

JavaScript 코드 예시:

const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]

HTML 코드 예시:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>

3. 자주 사용되는 지원 언어

대부분의 마크다운 렌더러는 다양한 프로그래밍 언어를 지원한다. 일반적으로 많이 사용되고 하이라이트가 잘 적용되는 언어는 다음과 같다.

python
javascript
java
c, cpp
html, css
ruby
php
go
sql
json
bash

4. 코드 하이라이트 활용 팁

언어 명시는 필수이다: 코드 블록을 작성할 때는 항상 해당 코드의 언어를 명시하는 것이 좋다. 이를 통해 독자는 코드를 더 쉽게 읽을 수 있으며, 렌더러는 정확하게 구문을 강조할 수 있다.
변경 사항 강조는 diff로: 버전 관리 시스템의 변경 내용을 보여줄 때 diff 키워드를 사용하면 추가된 줄과 삭제된 줄을 시각적으로 구분하여 보여줄 수 있다.
```
```diff
- 삭제된 코드 라인
+ 추가된 코드 라인
```
```
위와 같이 작성하면 아래와 같이 출력된다.
```
- 삭제된 코드 라인
+ 추가된 코드 라인
```
불필요한 하이라이트는 피한다: 일반 텍스트 파일 내용이나 단순한 설정값을 보여줄 때는 굳이 언어를 명시할 필요는 없다. 오히려 독자가 혼동할 수 있기 때문이다.

5. 결론

마크다운 코드 하이라이트 기능은 개발 관련 콘텐츠의 가독성을 크게 향상시키는 매우 중요한 요소이다. 이 기능을 적절히 활용하면 독자들에게 더 깔끔하고 이해하기 쉬운 코드를 제공할 수 있으며, 이는 곧 포스팅의 품질을 높이는 결과로 이어진다.

728x90

저작자표시 비영리 변경금지 (새창열림)

'etc. > ...' 카테고리의 다른 글

Pandoc: 범용 문서 변환기의 필수 사용법 (0)	2025.10.29
VS Code: 단순한 코드 편집기를 넘어선 통합 개발 환경인가? (5)	2025.07.06
문서 구분 단위, 왜 중요할까? (0)	2025.06.21
VSCode에서 Mermaid Chart로 다이어그램 그리기: 개발자를 위한 완벽 가이드 (1)	2025.06.02
개발자 이직 시 기본 행동 요령 (0)	2025.04.25

다음글이 없습니다.

이전글이 없습니다.