반응형
원래 사용하고있던 테마에 잔에러가 너무 많아서 티스토리에서 제공하는 기본 테마로 변경을 했는데요. 변경하면서 코드 블록 테마와 라인 넘버 설정을 새로 해야되더라구요. 구글링을 하면서 변경했는데 필자의 티스토리와 다른 부분이 있어서 저와 같은 현상을 겪는 분들을 위해서 포스팅해보겠습니다.
블록 테마 변경하는 방법
1. 아래의 홈페이지에 접속한다.
highlight.js demo
highlightjs.org
2. 아래 코드를 복사해서 [스킨 편집] - [html 편집]에 입력한다.
<!-- 코드블럭 라이브러리 추가 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/테마이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<!-- Line Number 적용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
<!-- 코드블럭 글씨 크기 -->
<style> pre > code {font-size: 13px;} </style>
※ 주의해야할 점
- 전부 소문자로 변경해서 입력해야한다. (VScode -> vscode)
- 공백은 하이폰(-)으로 변경해서 입력해야한다. (vs code -> vs-code)
코드 블록에 여백이 있어요.
본인이 선택한 코드 블록 테마를 잘 적용하셨는데 위처럼 코드 블록에 여백이 생기는 경우가 있습니다. 이럴땐 css 를 수정해주셔야하는데요.
.article-view pre 를 검색해서 padding을 3px -> 0으로 변경하시면 됩니다.
스크롤이 없어요.
.article-view pre 를 검색해서 white-space를 pre-wrap -> pre 로 변경하시면 됩니다.
라인넘버를 추가했더니 표 테두리가 생겼어요.
코드 블록 테마를 변경하셨는데 표 테두리가 생기는 경우가 발생할 수 있습니다. 이 문제도 css 를 수정하시면 쉽게 해결할 수 있습니다.
.article-view table 을 검색해서 아래와 같이 주석 처리(//)를 해주시면 됩니다.
반응형