티스토리 코드블럭 예쁘게 꾸미기
티스토리 기본 코드블럭 바꾸기
다음 사진에서 볼 수 있듯이, 티스토리의 기본 코드블럭은 매우 못생겼습니다.
이 코드를 예쁘게 바꿔보도록 하겠습니다.
highlight.js 라이브러리 적용
우선 다음의 링크에 접속하여 테마를 골라봅시다.
highlight.js demo
highlightjs.org
노란색 테두리 부분의 여러 테마를 클릭해보면서, 마음에 드는 테마를 하나 골라주세요.
테마의 이름을 기억해주셔야 합니다!
이름을 기억해 주셨다면, 다음으로 티스토리의 스킨 및 html을 편집해 주어야 합니다.
이를 위해 티스토리 관리자 페이지로 들어가서 좌측 메뉴바의 스킨 편집을 눌러줍니다.
그 후 우측 상단의 html 편집을 클릭해 줍니다.
html 편집을 누르면 다음과 같은 html 코드들이 나오게 됩니다.
여기서, <head></head> 사이에 </head> 바로 위 부분에 다음의 코드 블럭을 추가해줍니다.
<!-- 코드블럭 라이브러리 추가 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<!-- 코드블럭 글씨 크기 -->
<style> pre > code {font-size: 13.5px;} </style>위의 코드 블락에서 '이름' 부분에 위에서 기억한 테마 이름을 적어줍니다.
모두 소문자로, 띄어쓰기는 대시(-)로 변경하여 입력해 줍니다.
(ex) Arduino Light → arduino-light
폰트 사이즈도 변경하고 싶으신 분은 font-size에 원하는 픽셀(px)을 적어주시면 됩니다.
추가하면 위의 사진과 같이 들어가게 됩니다.
이후에 상단의 적용 버튼을 눌러 변경 사항을 적용해 줍니다.
적용을 했지만, 코드블럭이 변경이 되지 않는다면 티스토리 기본 플러그인인 syntax highlight를 제거해 주어야 합니다.
관리자 설정에서 플러그인 탭을 눌러 '코드 문법 강조'가 사용 중인지 확인합니다.
사용 중이라면 '코드 문법 강조'를 클릭하여 해제시켜 줍니다.
이후에 다시 돌아와서 변경된 코드블럭을 확인해 줍니다.
