Tistory 코드 블럭 Code Highlight 적용하는 방법 (hELLO 스킨)

감사하게도 디자이너분이 무료 배포 해주는데 마음에 드는 스킨을 발견해서 hELLO 스킨이라는 테마를 사용할 수 있게 되었다. 

그런데 코드블럭 디자인이 글씨가 거의 안보이는것이아닌가!

나중에 알게  된 사실은 내가 예전에 티스토리에서 제공해주는 코드블럭 테마를 '기본'테마로 변경해서 사용하고 있었기 때문에 스킨 테마의 코드블럭 테마가 적용되지 않았던것같다.

 

highlightjs 테마를 다운받아서 티스토리 코드블럭 테마를 변경하고 싶은 사람은 먼저 티스토리에서 기본제공하는 플러그인 테마를 해제해줘야 한다. 티스토리 관리 페이지에서 '플러그인' -> '코드문법 강조'(Syntax Highlight) -> 오른쪽 하단에 '해제'버튼을 클릭해서 해제해줘야지 code highlight 테마를 다운받았을 때 적용이 된다. 난 나중에 해줬지만, 먼저 이게 해제가 되어있는지 확인하고 바꾸는게 좋을 것 같다.

 

그리고 아래 링크 페이지에서 원하는 테마를 다운받는다. Get Version을 클릭해서 Custom package에서 원하는 프로그래밍 언어가 선택되어 있는지 확인한다. 보통 Common package에 파이썬, R, C언어 등 웬만한건 들어가 있는 것 같다. 하단으로 스크롤하면 Download버튼이 있으니 클릭. 

 

highlight.js

 

다운받은 zip폴더를 압축해제 후, highlight 폴더의(압축해제한 default 폴더 이름) -> styles 폴더에서 원하는 테마를 찾는다. 원하는 테마를 미리 보기 하고 싶다면, 아래페이지에서 확인 가능. 

 

highlight.js demo

 

원하는 테마의 파일 이름을 styles 폴더에서 찾은 뒤 스킨의 html 편집에 가서, 파일 업로드 부분에 추가해주면 된다. 자세하게 설명해주신 블로그가 또 있어서 참고 링크를 걸어본다.

 

[Tistory] Code Highlight 적용하기 (hELLO 스킨 사용시 에러 해결)

 

 

그리고 hELLO테마 경우에는 배경색이 고정되어 있도록 코드가 짜여져 있는 듯 하다. 여기서 나는 위에분 블로그를 참고해서 하다보니, CSS에서 '!important' 코드가 들어간 부분을 검색해서 찾으려고 했다. 그런데 디자이너분이 스킨을 업데이트 한 것인지 ㅋㅋ 코드가 좀 바뀌어있어서 위에 분 블로그대로 검색이 되지 않는다.. 그래서 찾아보니 'pre code'라는 부분을 찾아 색상을 변경해주어야 한다는 것을 알게됨. pre code라고 나와있는 부분에 background 컬러가 지정 된 부분이 두 군데 있는데, 하나는 light 모드, 하나는 dark모드에서의 색상이라고 한다. 나는 귀찮아서 그냥 두개 다 통일해주었다. rgb 가로 부분에 세 가지 숫자가 rgb 색상 코드인데, 이 색상을 원하는 색으로 변경해주면 된다. 

 

 

 

---

나중에 또 변경하고 싶을때 쉽게 찾을 수 있도록 기록해둔다. 

디자인 무료 배포해주신 디자이너님과 CS 코드를 모르는 나같은 사람이 커스텀 할 수 있도록 여러가지 정보를 올려주는 블로그님들께 감사한다 ㅎㅎ