티스토리 코드 블럭 폰트 변경

티스토리 코드 블럭 폰트는 개노답이다.

걍 보자마자 개열받는다. 화면 크면 폰트 개작아서 보이지도 않고 폰트땜에 가독성 겁나 떨어지고 진짜 개열받음 ㅋㅋ;

코드 하이라이트 해도 걍 노답이다.

 

코드 하이라이트 하는 방법은 구글링 하면 잘 나오니까 그거 보면 되고

폰트를 변경하는 법에 대해서 정리해보려고 한다.

 

사실 폰트 변경법도 구글링 하면 다 나오는데, 문제는 스킨마다 CSS 코드가 달라서 내 블로그에는 적용을 못할 수도 있다는 것이 문제다.

그래서 내가 사용한 방법을 포스팅 하려고 한다. 난 CSS 잘 몰라서 야매로 했는데, 일단 되긴 되니까 올려본다.

 

먼저 Google Fonts에서 원하는 폰트를 고른다.

https://fonts.google.com/

Google Fonts

 

나는 한글 주석도 예쁘게 보였으면 해서, Language에서 Korean을 선택해서

뭔가 누가 봐도 코드 전용 폰트처럼 보이는 "Nanum Gothic Coding" 폰트를 선택했다.

 

해당 폰트의 여러 스타일(Regular, Bold 등)중 원하는 스타일을 선택해서 "+ Select this style" 버튼을 누르면 위 사진처럼 우측에 무슨 창이 나타난다.

거기서 @import 체크박스를 클릭하면 아래에 CSS 코드가 나온다.

그 상태로 잘 놔두고 블로그 설정쪽으로 넘어가보자.

 

블로그 글 중에서 코드 블럭이 있는 글을 아무거나 하나 연다.

그 다음 코드 블럭 부분 위에 마우스 우클릭을 해서 [검사]를 누르면 화면 우측에 html 코드가 쭉 나온다.

html 코드를 보면, 코드 블럭에 해당하는 부분이 <code> 태그 부분임을 알 수 있다.

이 사실을 잘 기억한 채로 다음 파트로 넘어가자

 

[블로그 관리] -> [스킨 편집] -> [html 편집] -> [CSS] 를 클릭하면 위 화면처럼 나온다. 가운데 검은 상자는 비공개 글 내용이 나와서 지워둔 것이니 신경쓰지 말자.

 

아무튼 위 CSS 코드에 아까 선택해 뒀던 폰트에 대한 코드를 추가해 줄 것이다.

위 사진에서 우측 빨간 네모 박스 안에 있는 2개의 코드 중 첫 번째 코드를 먼저 추가해보자.

 

<style></style> 사이에 있는 내용만 복사해서

CSS 코드의 빈공간에 이렇게 복붙해주자.

나 같은 경우에는 @import에 대한 코드가 있는 부분 밑에 추가로 붙여넣어줬다. 위 사진에서 1, 2번째 @import는 원래 있던거고 3번째 @import만 내가 추가해줬다.

 

그리고 이제 import한 폰트를 코드 블럭에 적용을 해줘야 하는데, 위에서 코드 블럭에 해당하는 태그가 <code>임을 알아냈었다.

이 사실과, 위 사진의 우측 빨간 네모의 2번째 코드인 font-family: .... 를 복사해서 CSS 코드에 다음과 같이 추가해준다.

 

<code> 태그에 폰트를 적용해주겠다는 의미로 추측된다 (나는 css를 잘 모른다)

추가하는 위치는 아무데나 상관 없는 것 같은데 그냥 나는 이런 식으로 했다는 걸 보여주려고 위 아래 코드도 같이 캡쳐해봤다.

 

이렇게 하면 적용이 잘 되는 것을 알 수 있다.

코드 하이라이트 하는 플러그인과 충돌도 안 나는것으로 보인다.

 

참고

https://codesyun.tistory.com/95

[Tistory] 티스토리 코드블록 폰트 변경