마크다운 글자 색 바꾸는 법

표준 마크다운에는 색 문법이 없습니다

마크다운은 글자 색을 바꾸는 문법을 제공하지 않습니다. 빠뜨린 게 아니라 일부러 넣지 않은 것입니다.

마크다운은 "이건 제목이다, 이건 목록이다"라는 구조만 표시하고, 그걸 어떤 색과 크기로 보여줄지는 렌더러에 맡기는 방향으로 설계됐습니다. 그래야 같은 원문이 GitHub에서도, 블로그에서도, 인쇄물에서도 그 환경에 맞게 나옵니다. 이미지 크기 지정이 없는 것도 같은 이유입니다.

그래서 색을 넣으려면 HTML을 직접 써야 합니다.

<span style="color: #e03131">빨간 글자</span>
<span style="color: #1971c2">파란 글자</span>

HTML을 허용하는 마크다운 도구(대부분의 정적 블로그, 일부 위키 등)에서는 위 코드가 색으로 표시됩니다.

⚠️ GitHub에서는 색이 안 됩니다

가장 많이 묻는 부분입니다. GitHub은 보안을 위해 style 속성을 제거합니다. 따라서 위의 style="color:..." 방식은 GitHub의 README·이슈·댓글에서 전혀 적용되지 않습니다. 색은 그냥 무시되고 검은 글자로 나옵니다.

태그 자체를 막는 게 아니라 style 속성만 걷어내는 것이라, <span>은 남고 색만 사라집니다. 그래서 "태그를 썼는데 아무 일도 안 일어난다"처럼 보입니다. 같은 이유로 가운데 정렬도 style이 아니라 align 속성으로 해야 합니다.

GitHub에서 색 느낌을 내는 우회법

diff 코드 블록 — 줄 앞 기호에 따라 초록·빨강으로 표시됩니다.

+ 초록색으로 강조되는 줄
- 빨간색으로 강조되는 줄

간단하지만 대가가 있습니다. 코드 블록이라 고정폭 글꼴로 나오고, 본문 문단 안에서는 못 씁니다. 한 줄 통째로만 색이 들어가므로 문장 중간의 한 단어만 강조할 수도 없습니다. "추가/삭제"라는 원래 의미와 무관한 내용에 쓰면 읽는 사람이 잠깐 헷갈리기도 합니다.

수식(LaTeX) 렌더링 — GitHub은 $...$ 형태의 수식을 렌더링하는데, 이를 이용해 색을 넣는 방법이 알려져 있습니다.

$\textcolor{red}{\text{빨간 글자}}$

다만 이건 글자를 수식으로 그리는 것이라 글꼴과 자간이 본문과 달라지고, 한글은 특히 어색하게 나옵니다. 렌더링 방식이 바뀌면 깨질 수도 있습니다. 급할 때 쓰는 임시방편 정도로 보시는 게 좋습니다.

색 대신 다른 강조 — 사실 대부분의 경우 이게 정답입니다. 아래에서 따로 다루겠습니다.

⚠️ 색을 하드코딩하면 다크 모드에서 안 보입니다

색을 넣기로 했다면 이 문제를 먼저 생각해야 합니다.

color: #333처럼 어두운 색을 지정한 글자는 흰 배경에서는 잘 보이지만, 다크 모드에서는 어두운 배경에 어두운 글자가 되어 거의 안 읽힙니다. 반대로 밝은 노란색을 지정하면 라이트 모드에서 날아갑니다.

요즘은 대부분의 블로그 플랫폼과 문서 도구가 다크 모드를 지원하고, 독자의 절반 가까이가 그걸 켜고 봅니다. 배경색은 테마를 따라 바뀌는데 글자색만 고정돼 있으면 반드시 어긋납니다.

• 어느 배경에서도 읽히는 중간 명도의 색을 고르세요 (아주 밝거나 아주 어두운 색을 피하기)
• 배경색까지 함께 지정하면(background-color) 대비를 스스로 보장할 수 있습니다
• 가장 안전한 건 색을 쓰지 않는 것입니다

색으로만 정보를 전달하지 마세요

"빨간 항목은 필수, 회색 항목은 선택"처럼 색에만 의미를 담으면 그 정보가 일부 독자에게는 전달되지 않습니다.

• 색을 구분하기 어려운 사람이 생각보다 많고, 특히 남성에게 흔합니다
• 화면 낭독기는 색을 읽어주지 않습니다
• 흑백 인쇄하면 전부 회색이 됩니다
• 색을 지원하지 않는 플랫폼으로 옮기면 그냥 사라집니다

색은 이미 글로 표시된 것을 한 번 더 강조하는 용도로 쓰세요. "빨강 = 필수"가 아니라 "필수 — 빨간색으로도 표시"처럼요.

색 말고 쓸 수 있는 것들

색이 안 되는 환경이 많다는 걸 생각하면, 애초에 다른 방법이 더 낫습니다. 아래는 거의 모든 곳에서 통합니다.

특히 콜아웃은 색이 필요한 상황 대부분을 대체합니다. GitHub과 옵시디언에서 > [!WARNING]을 쓰면 그 환경에 맞는 색과 아이콘이 자동으로 붙습니다. 색을 직접 지정하는 것보다 낫습니다 — 다크 모드도 알아서 처리되고, 지원하지 않는 곳에서도 최소한 인용구로는 보입니다.

노션·티스토리 등은 자체 색 기능 사용

노션, 티스토리, 워드프레스 같은 플랫폼은 마크다운 색 문법 대신 에디터의 글자 색 도구(텍스트를 선택하고 색 지정)를 제공합니다. 마크다운으로 색을 넣으려 애쓰기보다 그 기능을 쓰는 편이 안전합니다. 다크 모드 대응도 플랫폼이 알아서 합니다.

이지 마크다운 에디터도 같은 방식입니다. 텍스트를 드래그하면 도구 모음이 떠서 글자색과 형광펜을 고를 수 있습니다.

플랫폼별 정리

정리하면, 색은 표준 마크다운이 아니라 HTML이나 플랫폼 기능으로 넣어야 하고, GitHub에서는 inline style 색이 통하지 않습니다. 그리고 넣기 전에 한 번 물어보세요 — 굵게나 콜아웃으로 안 되는 이유가 정말 있는가. 대개는 없습니다.