티스토리 코드블럭 테마 변경하기
티스토리 코드블럭 테마를 변경하는 방법에 대해 확인해보겠습니다.
개발 관련 블로그를 하는 경우에는 코드를 붙여넣기 해야하는 경우가 많습니다.
기본 테마로 할경우에는 강조되는 영역이 없어 가독성이 떨어지게 됩니다. 티스토리에서는 쉽게 코드블럭 테마를 변경할 수 있는데요.
코드블럭 테마를 변경하는 방법은 기본적으로 아래 2가지 방법이 있습니다.
1. 기본 플러그인 사용
2. 커스텀 테마 적용하기(highlight.js)
위 두가지 방법에 대해 확인해보겠습니다.
1. 기본 플러그인 사용
관리자 페이지에서 플러그인 탭을 선택합니다.
여러 플러그인 중에 Synatax highlight라는 플러그인이 있습니다.
아래 순서대로 진행하면 몇개의 템플릿 테마를 적용 할 수 있습니다.
최종적으로 테마를 선택하고 적용을 누르면 코드블럭이 변경됩니다.
2. 커스텀 테마 적용하기(highlight.js)
제 블로그 같은 경우에는 커스텀 테마로 적용되어 있습니다.
highlight.js를 활용하고 있습니다.
아래 사이트에서 원하는 테마의 네임을 확인합니다.
highlight.js demo (highlightjs.org)
highlight.js demo
highlightjs.org
제 블로그의 경우에는 atom one dark 테마를 적용하고 있습니다. 해당 테마를 선택하고 어떤식으로 출력되는지 확인해봅니다.
그리고 테마 이름을 복사해줍니다.
테마명을 확인했으면 아래와 같은 스크립트를 준비합니다. 여기서, <link rel=""> 태그의 제일 마지막 부분을 선택했던 테마명으로 변경해줍니다. 띄어쓰기 공간은 하이폰으로 변경해줍니다.
만약, atom one light 테마를 선택했다면, 아래 노란색 태그와 같이 끝 부분을 변경해주면 됩니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/atom-one-light.min.css">
<!-- highlight theme-->
<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>
그리고 다시 관리자 화면으로 돌아와서
꾸미기-> 스킨편집으로 들어갑니다.
html 편집으로 들어가서 아래와 같이 <head></head> 태그 사이에 위에서 생성했던 스크립트를 입력하고 저장해줍니다.
만약, Synatax highlight 를 적용했다면 적용 해제를 해줍니다. 그리고 코드 페이지를 확인해봅니다.
정상적으로 적용된 것을 확인 할 수 있습니다.