반응형
간단하게 플러그인을 이용하여 코드블럭 테마 바꾸기
- 티스토리의 관리자창으로 들어가서 왼쪽 사이드바에 플러그인 메뉴를 클릭한다.
- 검색 버튼을 누르고 코드를 검색한다.
- 코드 문법 강조(Syntax Highlight)를 클릭하고, 사용하고 싶은 테마를 선택하여 적용한다.
HTML을 편집하여 코드블럭 테마 바꾸기
1. 다음 코드를 복사한다.
아래의 코드는 highlight.js를 Browser에서 사용할 때 사용한다.
(자세한 방법은 https://highlightjs.org/usage/를 참고)
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
2. highlight.js demo 사이트(https://highlightjs.org/static/demo/)에서 원하는 테마를 찾는다.
나는 Visual Studio Code를 사용하여 익숙한 Vs 2015 테마를 사용하였다.
3. 원하는 테마에 맞춰 복사한 코드를 수정한다.
맨 첫 줄의 끝 부분에 있는 default.min.css를 사용할 테마이름.min.css로 바꾼다.
수정 방법
- 코드를 수정할 때 테마 이름을 그대로 넣는 것이 아니라 대문자는 소문자로 바꾸고, 띄어쓰기는 -로 바꾸어야 한다.
- 예시
Paraiso Dark -> paraiso-dark
- 예시
- 띄어쓰기가 있지만 -가 없이 그냥 붙여쓰는 경우도 있다.
- 예시
Vs 2015 -> vs2015
- 예시
수정이 제대로 되었는지 검사
- 코드 첫 줄에 나와 있는 주소(href=의 뒷부분)의 앞에 'https://'를 붙여 브라우저로 열어본다.
- 예시
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css
💡 코드가 제대로 수정되었는지 확인했음에도 코드블럭이 수정되지 않는 경우가 있다. 왜 그런지는 모르겠다.
수정 예시
- 나는 Vs 2015 테마를 사용하기 위해 default.min.css를 vs2015.min.css로 코드를 수정하였다.
<!-- 맨 첫 줄의 끝 부분에 있는 default.min.css를 사용할 테마이름.min.css로 바꾼다. -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
4. Tistory의 html을 편집한다.
- 티스토리의 관리자창으로 들어가서 왼쪽 사이드바에 꾸미기의 스킨 편집 메뉴를 클릭한다.
- html 편집 버튼을 클릭한다.
- 윈도우는 Control + F, 맥은 Command + F를 눌러 내부 검색 창을 띄운다.
- </head>를 검색하여 찾는다.
- </head> 위에 수정한 코드를 추가한다.
- 적용 버튼을 누르고 코드 블럭이 제대로 작동하는지 확인한다.
반응형
'Tistory' 카테고리의 다른 글
티스토리(tistory) 북클럽 스킨 메뉴 숨기기 (0) | 2023.04.19 |
---|---|
티스토리(Tistory) 특정 부분만 드래그 허용 (0) | 2023.04.10 |
티스토리(Tistory) 헤더(header) 상단 고정하기 (0) | 2023.04.08 |
댓글