블로그스팟 글에 코드 블록 삽입하는 법
📋 목차 블로그스팟에 코드 블록이 없다고? highlight.js 테마에 설치하기 글 작성할 때 코드 넣는 실전 방법 GitHub Gist로 더 간단하게 삽입하기 코드 블록 디자인 입맛대로 바꾸기 처음에 다 겪는 실수 모음 자주 묻는 질문 블로그스팟에서 개발 관련 글을 쓰려는데 코드 블록 기능이 없어서 당황했다면, highlight.js 라이브러리 하나면 깔끔한 신택스 하이라이팅까지 해결된다. 블로그스팟으로 기술 블로그를 운영하겠다고 마음먹고 첫 글을 쓰는데, 코드를 넣을 방법이 없어서 멘붕이 왔다. 티스토리는 버튼 하나로 코드 블록이 들어가잖아요. 근데 블로그스팟 에디터에는 그런 게 없더라고요. 코드를 그냥 텍스트로 붙여넣으면 들여쓰기가 다 깨지고, 줄바꿈도 엉망이 되고. 처음에는 스크린샷을 찍어서 이미지로 넣을까도 생각했는데, 그러면 복사도 안 되고 SEO에도 최악이라 포기했다. 이리저리 검색하면서 highlight.js라는 라이브러리를 발견했고, GitHub Gist를 활용하는 방법도 알게 됐다. 둘 다 써보니 상황에 따라 쓰임이 다르더라고요. 이 글에서 두 가지 방법 다 정리해놓을 테니까 본인 상황에 맞는 걸 골라 쓰면 된다. 블로그스팟에 코드 블록이 없다고? 블로그스팟(Blogger)은 구글에서 제공하는 무료 블로그 플랫폼인데, 글꼴 변경이나 자동 임시저장 같은 기능은 괜찮다. 문제는 개발자에게 필수인 코드 블록 삽입 기능을 기본으로 제공하지 않는다는 거다. 에디터에서 Courier 폰트를 적용할 수는 있거든요. 근데 이걸 코드 블록처럼 쓰면 각 줄이 별도 문단으로 처리되면서 줄 간격이 벌어진다. 보기 흉하다. HTML 보기로 전환해서 <pre> 태그로 감싸면 줄 간격은 해결되지만, 구문 강조(syntax highlighting)가 안 되니까 코드가 시각적으로 묻혀버린다. 그래서 필요한 게 외부 라이브러리다. 블로그스팟은 테마 HTML을 직접 편집할 수 있어서, 여기에 자바스크립...
댓글
댓글 쓰기