개발과 관련된 정보를 모두 티스토리에 올리는 저는 코드블럭을 자주 사용하는 편입니다.
기본 테마로 설정되어 있는 경우, 가독성이 떨어지기 때문에 테마 변경을 해주도록 하겠습니다.
기본 플러그인 사용 해제
티스토리 기본 코드블럭 테마가 적용되어 있는 경우, 새로 테마를 다운받아 저장해도 적용이 되지 않으므로 사용을 해제합니다.
저는 이미 해제를 해주었기 때문에 적용이라는 버튼이 뜨네요.
테마 다운로드
highlight.js demo에서 다양한 코드블럭 테마들을 다운받을 수 있습니다.
https://highlightjs.org/static/demo/
개인적으로 Atom One Dark 테마의 가독성이 좋고 색감이 예쁘다고 생각합니다.
인텔리제이에서도 이 테마를 사용하고 있어서 익숙하기도 했습니다.
링크 걸기
해당 테마를 적용하기 위해서는 3가지 링크를 걸어주어야 합니다.
🔍 테마 js 연동
🔍 테마 css 적용
🔍 연동된 테마 js 함수 실행
- 관리 > 꾸미기 > 스킨 편집 탭으로 이동
- 스킨편집에서 html 편집 클릭
- HTML의사이에 아래 코드를 복사 > 붙여넣기
이때, css의 테마이름은 대문자 > 소문자로 변경 후 띄어쓰기는 '-'로 대체해서 표기합니다.
<!-- 테마 변경 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<!-- load() -->
<script>hljs.initHighlightingOnLoad();</script>반응형