코드 블록 스타일링 완벽 정리: Highlight.js로 프로그래밍 블로그 코드 출력 4배 예쁘게 만드는 법

코드 블록 스타일링 프로그래밍 블로그를 위한 예쁜 코드 출력(Highlight.js 등) 방법

Highlight.js로 프로그래밍 블로그 코드 출력 4배 예쁘게 만드는 법

Highlight.js를 제대로 적용하면 블로그의 코드 블록이 VS Code 수준으로 깔끔하게 출력된다. 단순한 텍스트 덩어리였던 코드가 문법별로 색상이 입혀지면서 가독성이 확 달라진다. 프로그래밍 블로그를 운영한다면 코드 블록 스타일링은 선택이 아니라 필수다.

블로그에 코드를 그냥 붙여넣었을 때의 그 허전함… 다들 알 것이다. 배경도 없고, 색상도 없고, 그냥 텍스트. 이걸 보는 독자들도 읽기 불편해서 금방 이탈한다. Highlight.js 하나로 이 문제를 한 번에 해결할 수 있다.

 

📋목차

• 코드 블록 스타일링이 중요한 이유
• Highlight.js란 무엇인가
• Highlight.js 기본 설치 및 적용
• 테마 선택과 커스터마이징
• 복사 버튼 기능 추가하기
• 티스토리 블로그에 적용하는 법
• 자주 묻는 질문과 트러블슈팅

💡 코드 블록 스타일링이 중요한 이유

프로그래밍 블로그에서 코드는 핵심 콘텐츠다. 그런데 "코드 블록 스타일링"이 안 되어 있으면 독자가 코드를 읽다가 눈이 피로해진다. 문법 강조(syntax highlighting)가 없으면 어디가 변수고 어디가 함수인지 한눈에 파악하기 어렵다.

SEO 측면에서도 코드를 적절한 pre, code 태그 안에 담는 것이 중요하다. 구글 크롤러가 구조화된 코드 콘텐츠를 더 잘 인식하기 때문이다. 잘 꾸며진 코드 블록은 독자 체류 시간을 늘려주고, 결국 검색 순위에도 좋은 영향을 준다.

🔍 Highlight.js란 무엇인가

"Highlight.js"는 웹 페이지의 코드 블록에 자동으로 문법 강조 색상을 입혀주는 오픈소스 라이브러리다. 현재 약 197개 언어를 지원하고, 90개 이상의 테마를 제공한다. JavaScript 한 줄만 추가하면 HTML, CSS, Python, Java, SQL 등 거의 모든 언어의 코드를 예쁘게 만들 수 있다.

비슷한 도구로 Prism.js가 있는데, Highlight.js는 별도 설정 없이 자동으로 언어를 감지해준다는 점에서 초보자가 사용하기 더 편리하다.

⚙️ Highlight.js 기본 설치 및 적용

CDN 방식이 가장 빠르게 적용할 수 있는 방법이다. HTML의 head 태그 안에 아래 코드를 추가하면 된다.

그 다음, 코드를 작성할 때는 pre와 code 태그를 함께 쓴다.

const greeting = "Hello, World!";
console.log(greeting);

class="language-javascript" 처럼 언어를 명시하면 더 정확한 하이라이팅이 적용된다. 언어를 지정하지 않아도 자동 감지가 되지만, 명시하는 편이 더 정확하고 빠르다.

🎨 테마 선택과 커스터마이징

"코드 블록 스타일링"에서 테마 선택은 블로그 전체 분위기를 결정한다. Highlight.js 공식 사이트(highlightjs.org)에서 테마를 미리 보고 선택할 수 있다.

인기 있는 테마 몇 가지를 소개하면 이렇다.

atom-one-dark는 다크 모드 기반으로 눈에 편하고 가장 많이 쓰인다. github는 깃허브 스타일로 밝고 깔끔하다. monokai는 서브라임 텍스트 느낌으로 선명한 색상이 특징이다. vs2015는 비주얼 스튜디오 스타일로 익숙한 느낌을 준다.

테마 파일만 바꾸면 되니까 취향대로 골라서 쓰면 된다. CSS link 태그의 href만 변경하면 즉시 적용된다.

추가로 pre 태그에 CSS를 덧씌워 코드 블록을 더 세밀하게 꾸밀 수도 있다.

pre {
border-radius: 10px;
padding: 20px;
font-size: 14px;
line-height: 1.6;
overflow-x: auto;
}

📋 복사 버튼 기능 추가하기

개발 관련 블로그에서 독자들이 가장 좋아하는 기능 중 하나가 코드 복사 버튼이다. 클릭 한 번으로 코드 전체를 클립보드에 복사할 수 있어서 UX가 확 좋아진다.

JavaScript로 간단하게 구현할 수 있다.

document.querySelectorAll('pre').forEach(block => {
const btn = document.createElement('button');
btn.innerText = '복사';
btn.style.cssText = 'position:absolute;top:8px;right:8px;padding:4px 10px;font-size:12px;cursor:pointer;';
block.style.position = 'relative';
block.appendChild(btn);
btn.addEventListener('click', () => {
navigator.clipboard.writeText(block.innerText);
btn.innerText = '복사됨!';
setTimeout(() => btn.innerText = '복사', 1500);
});
});

이 스크립트를 body 닫는 태그 직전에 추가하면 모든 pre 블록에 자동으로 복사 버튼이 생긴다.

🏠 티스토리 블로그에 적용하는 법

티스토리에서는 스킨 편집 → HTML 탭에서 head 태그 안에 Highlight.js CDN 링크를 추가하면 된다. 단, 티스토리 에디터에서 코드 블록을 삽입할 때 pre와 code 태그가 자동으로 붙는지 확인해야 한다.

티스토리 기본 에디터는 코드 블록 삽입 시 pre 태그를 생성하지만, 언어 클래스가 붙지 않는 경우가 있다. 이럴 때는 HTML 편집 모드에서 직접 class="language-python" 같은 클래스를 추가해줘야 한다.

마크다운 모드를 사용한다면 백틱 세 개로 코드 블록을 만들고 언어를 명시하면 대부분 자동으로 처리된다.

🔧 자주 묻는 질문과 트러블슈팅

Highlight.js가 적용이 안 된다는 질문이 가장 많다. 원인의 대부분은 script 태그 로딩 순서 문제다. hljs.highlightAll() 호출이 HTML 파싱 전에 실행되면 적용이 안 된다. DOMContentLoaded 이벤트 안에 넣거나, script 태그를 body 끝에 배치하는 게 가장 안전한 방법이다.

두 번째 질문은 특정 언어만 안 된다는 것인데, 기본 CDN은 일반적인 언어만 포함하고 일부 언어는 별도 파일을 추가해야 한다. 공식 사이트에서 해당 언어 스크립트를 따로 불러오면 해결된다.

---

출처 및 참고
- Highlight.js 공식: https://highlightjs.org
- CDN: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/
- MDN pre 태그: https://developer.mozilla.org/ko/docs/Web/HTML/Element/pre