다크모드에서 Syntax Highlight가 출력되지 않는 문제 해결 방법

문제 상황

전문가의 영역이든, 생활인의 영역이든 현대인이라면 코드를 보고 수정하는 일을 어느정도 할 수 밖에 없다.
그럴 때마다 느끼는 것이, Syntax Highlighting이 얼마나 코드작업을 편리하게 해주는가이다.

흑백의 코드 뭉치들이 각각의 역할에 맞게 색상을 부여받을 때, 개안을 하는 기분이니 말이다.

여하튼, 내 블로그에도 내가 직접 했던 코드 작업들을 기록해보려고 했는데, 아래와 같이 흑백으로만 출력되는 문제가 발생했다.
아무래도 다크모드로 스킨을 편집하며 본문 색상을 강제하는 과정에서 코드블록에 적용되어야 할 색상이 disable된 것 같았다.

우선, 내가 CSS에 추가로 작업해둔 다크모드는 다음과 같다.

저 #e0e0e0이 내가 블로그에서 사용하고자 했던 다크모드에서의 본문 색상이었다.

문제는 저 녀석이 낄끼빠빠를 하지 못하고(...) 코드블록에까지 침범한 것.

그도 그럴 것이, !important;로 문법 강조를 해둔 바람에 기존의 색상 코드들을 다 씹어먹고 있었던 것이다.

검사창을 켜서 본문에 어떤 색상 코드가 적용되고 있는지를 찾았다.

살펴보니 티스토리 북클럽 스킨에서 원래 적용하고 있는 색상위로 내가 만든 다크모드 색상이 오버라이드 되어 있는 상황.

다크모드 색상을 disable 했더니, 원래 북클럽에 적용된 기본 폰트 색상인 #333이 나타났다.

그리고 오버라이드했던 색상 코드를 제거하자 코드블럭 안의 Syntax Highlight도 되살아나는 것을 확인할 수 있었다.

이후, 검사에서 찾은 바를 바탕으로 스킨 편집의 CSS창에서 #aritcle-view를 검색해서 문제 부분을 찾았다.

여기서 기존에 있던 color인 #222를 지우고 내가 쓰고 싶은 본문 색상을 입혔다.

 color: #e0e0e0;

이제 코드블럭에서 문법 강조가 제대로 작동한다. 문제 해결