다음단계
티스토리 기본 syntax 플러그인이 못생겨서 색상을 좀 바꾸고 싶었다.
옛날 티스토리 블로그 글들을 뒤져가며 이것저것 다 복붙해봤는데
말을.... 안 들어서..........ㅎ
그냥 내가 몇 시간 붙들고 알아냈다.
제일 흔하게 쓰이는 듯한 highlight.js를 이용하기로 했다.
highlight.js 깃허브 https://github.com/highlightjs
공식 페이지 https://highlightjs.org/
들어가면 엄청나게 빨간 배경이 눈아프게 반겨준다.
결론 (!!)
바쁘다 바빠 현대인을 위해 설명은 뒤로하고
결론부터 말하자면
1. <스킨 편집> 클릭
2. <html 편집> 클릭
3. 아래 코드를 복사해서
<!--codeblock highlight-->
<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.highlightAll();</script>4. <head>와 </head> 사이에 붙여넣기
5. 원하는 스타일 선택하기
https://highlightjs.org/static/demo/
여기 접속해서 Themes 중 마음에 드는 스타일의 이름을 기억한다.
나는 androidstudio를 선택해 보려고 한다.
https://github.com/highlightjs/highlight.js/tree/main/src/styles
여기 접속해서 같은 이름을 찾아 .css 앞의 파일명을 확인한다.
6. 선택한 스타일 적용하기
4번에서 복붙한 코드의 "원하는-스타일-이름" 부분을
아까 확인한 파일명과 같이 고쳐준다.
7. 끝!
적용 누르면 끝!!
코드 색상이 선택한 스타일로 바뀌었다.
적용이 안 될 경우 해볼 만한 것
이미 티스토리 syntax highlight 플러그인을 사용중이라면
스타일이 적용되지 않을 수 있다.
플러그인에서
syntax를 검색해보고 <코드 문법 강조>가 사용중이라면 해제를 눌러주자.
+) 참고
검색했을 때 아래 코드를 추가하라는 설명이 많았는데
이것도 넣으면 작동은 되지만 구버전인 듯하다.
<script>hljs.initHighlightingOnLoad();</script>
안전하게 공홈에서 권장하는 아래 코드를 사용하자.
<script>hljs.highlightAll();</script>
'dev > others' 카테고리의 다른 글
| Windows 윈도우 기본기능으로 화면녹화 하기 (설치x) (0) | 2023.02.26 |
|---|---|
| [티스토리] 블로그 폰트 변경하는 방법 (2. 다운로드해서 적용하기) (0) | 2023.02.07 |
| [티스토리] 블로그 폰트 변경하는 방법 (1. 웹폰트 이용하기) (0) | 2023.01.30 |
| [티스토리] 코드블럭 폰트 변경 10분컷 가이드 (2) | 2023.01.24 |
| [티스토리] 모바일앱 수정 시 내용이 Source로 인식되는 현상 (0) | 2023.01.19 |
