[이모저모] 티스토리 코드블럭 글씨체 바꾸는 CSS 설정 방법

안녕하세요. 월요일의 21입니다. 블로그 폰트를 바꾸다 보면 본문은 잘 바뀌는데, 이상하게 코드블럭만 따로 노는 경우가 있다. 본문은 내가 원하는 글씨체로 보이는데, 코드블럭 안쪽만 갑자기 기본 글씨체처럼 보인다. 처음에는 이게 별일 아닌 것 같지만, 막상 글 전체를 보면 은근히 거슬린다.

특히 티스토리에서 글을 쓰다 보면 이런 일이 자주 생긴다. 본문은 스킨 CSS나 글 편집기에서 지정한 폰트를 따라가는데, 코드블럭은 별도의 스타일을 가지고 있는 경우가 많다. 그래서 본문은 고운 글씨체인데 코드블럭만 갑자기 개발자 노트북 화면처럼 변한다. 물론 코드블럭이 원래 그런 용도로 만들어진 건 맞다. 문제는 블로그 전체 분위기와 너무 따로 논다는 데 있다.

나는 블로그 글을 하나의 문서처럼 보고 싶었다. 본문, 제목, 인용문, 코드블럭까지 전부 같은 결을 가지고 있어야 덜 거슬린다. 물론 코드블럭은 코드블럭답게 보여야 한다. 하지만 꼭 글씨체까지 따로 놀 필요는 없다고 봤다. 그래서 코드블럭에도 본문과 같은 넷마블체를 적용했다. 정확히 말하면 본문 전체에 적용한 폰트를 코드블럭, 인라인 코드, pre, code, .hljs 영역까지 강제로 물려준 것이다.

아래처럼 코드블럭 영역까지 따로 지정해 주면 된다. 핵심은 pre, code, pre code, .hljs, pre[data-ke-type="codeblock"] 같은 요소를 함께 잡아주는 것이다. 티스토리는 에디터 방식이나 스킨에 따라 코드블럭 구조가 조금씩 다르게 잡힐 수 있어서, 하나만 지정하면 적용이 안 되는 경우가 있다.

pre,
code,
pre code,
.hljs,
.codeblock,
pre[data-ke-type="codeblock"],
pre[data-ke-language],
pre[class],
code[class] {
  font-family: 'Netmarble', 'Malgun Gothic', 'Apple SD Gothic Neo', serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

여기서 중요한 건 !important다. 사실 개인적으로는 !important를 남발하는 걸 좋아하지 않는다. CSS를 조금만 만져도 알겠지만, 이건 거의 마지막에 꺼내는 망치 같은 것이다. 그런데 티스토리처럼 스킨 CSS, 에디터 CSS, 플러그인 CSS가 뒤엉켜 있는 환경에서는 어쩔 수 없이 망치를 들어야 할 때가 있다. 말로 설득이 안 되면 CSS한테도 약간의 강제력이 필요하다.

코드블럭을 넣을 때 또 하나 거슬리는 부분은 가로 스크롤이다. 긴 코드가 들어가면 모바일에서 화면이 옆으로 밀리거나, 박스 안에 가로 스크롤이 생긴다. 개발 블로그라면 그게 자연스러울 수도 있지만, 일반적인 블로그 글에서는 생각보다 보기 불편하다. 그래서 나는 자동 줄바꿈을 넣었다. white-space: pre-wrap, word-break: break-word, overflow-wrap: anywhere를 같이 넣으면 긴 코드도 화면 안에서 적당히 접힌다.

white-space: pre-wrap !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
overflow-x: hidden !important;

물론 이 방식에도 단점은 있다. 코드의 원래 줄 구조를 중요하게 보는 사람에게는 자동 줄바꿈이 오히려 불편할 수 있다. 하지만 내 블로그는 전문 개발 블로그가 아니다. 코드 자체를 복사해서 쓰는 목적보다, 글 안에서 CSS 예시를 보여주는 목적이 더 크다. 그래서 가독성을 우선했다. 방문자가 모바일로 들어왔을 때 옆으로 밀리는 것보다, 조금 접히더라도 화면 안에서 읽히는 편이 낫다고 봤다.

그리고 코드블럭 배경은 검은 배경을 유지했다. 문장 중간에 들어가는 pre, code, .hljs 같은 인라인 코드는 회색 배경으로 가볍게 구분하고, 실제 코드블럭은 검은 배경으로 분리하는 쪽이 더 확실하다. 본문과 코드 예시가 한눈에 갈라져서 읽기에도 편하고, 코드블럭답게 보이는 느낌도 살아난다.

pre,
pre[data-ke-type="codeblock"],
pre[data-ke-language] {
  padding: 14px 16px !important;
  margin: 18px 0 !important;
  border-radius: 10px !important;
  background: #1f1f1f !important;
  color: #f2f2f2 !important;
}

인라인 코드도 따로 보정했다. 글을 쓰다 보면 문장 중간에 font-family나 line-height 같은 코드를 넣을 때가 있는데, 이것도 기본값으로 두면 혼자만 다른 글씨체로 보인다. 그래서 인라인 코드에도 같은 폰트를 적용했다. 대신 크기는 본문보다 아주 살짝 작게 조정했다. 본문 흐름을 해치지 않으면서도 코드라는 느낌은 남겨두기 위해서다.

다만 여기서 헷갈리기 쉬운 부분이 있다. 글쓰기 에디터에서 보이는 회색 배경과 미리보기에서 보이는 회색 배경이 항상 같지는 않다. 에디터 안에서는 pre, code, .hljs 같은 인라인 코드가 회색 박스로 잘 보이는데, 미리보기로 넘어가면 그 모양이 사라지거나 다르게 보일 수 있다. 이건 내가 코드를 잘못 넣어서라기보다, 티스토리가 에디터 화면과 실제 출력 화면을 다르게 렌더링하기 때문이다.

특히 글 본문 안에 넣은 <style> 태그는 티스토리 미리보기나 스킨 구조에 따라 일부가 무시될 수 있다. 그래서 가장 안정적인 방법은 이 CSS를 글 안에 넣는 게 아니라, 스킨 CSS 탭에 넣는 것이다. 하지만 글마다 따로 테스트하거나 특정 글에만 적용하고 싶다면 본문 HTML 안에 넣어도 된다. 다만 그 경우에는 에디터에서 보이는 것과 미리보기에서 보이는 것이 조금 다를 수 있다는 점은 고려해야 한다.

모바일 보정도 넣었다. PC에서 예뻐 보이는 코드블럭이 모바일에서는 답답하게 보일 수 있다. 특히 폰트 크기와 padding이 문제다. 그래서 화면 폭이 768px 이하일 때는 코드블럭 글자 크기를 14px로 낮추고, 안쪽 여백도 조금 줄였다. 그냥 모바일에서 덜 답답하게 보이게 하는 정도다.

본문 폰트만 바꾼다고 블로그 폰트 작업이 끝나는 게 아니다. 제목, 본문, span, 강조, 밑줄, 코드블럭, 인라인 코드까지 다 봐야 한다. 특히 티스토리는 글 편집기에서 자동으로 span을 많이 넣기 때문에, 단순히 body에만 폰트를 넣으면 중간중간 삐져나오는 부분이 생긴다. 그 삐져나오는 부분을 하나씩 잡아주는 과정이 필요하다.

블로그 폰트는 취향의 문제다. 누군가는 기본 폰트가 가장 편하다고 할 수 있고, 누군가는 바탕체가 더 좋다고 할 수 있다. 나도 그 말에 반박할 생각은 없다. 다만 내 블로그에서는 글의 분위기와 코드블럭의 분위기가 따로 노는 게 싫었다. 그래서 이렇게 맞췄다. 대단한 커스터마이징은 아니지만, 적어도 내 눈에는 훨씬 덜 거슬린다. 블로그는 결국 남이 보기 전에 내가 계속 보게 되는 공간이니까.