목차
1. 테마 고르기
여기 링크에 들어가서 원하는 테마를 고른 뒤, 깃헙링크 에서 해당되는 이름을 찾는다 .
2. 티스토리 HTML 코드 수정
티스토리 스킨편집 → html 편집에 들어가서 <head> 와 </head> 사이에 아래의 코드를 넣어준다
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
혹은 highlight.min.js 파일과 원하는 테마의 파일(ex> pico.min.css ) 을 업로드 한 뒤,
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="./images/default.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.highlightAll();</script>default 대신 원하는 테마 명을 적어주면 된다
3. 테마적용
위의 코드에서 default 자리에, 아까 위에서 찾았던 테마 이름을 넣어준 뒤 적용 누르면 끝!
🔔🔔주의🔔🔔
티스토리 → 플러그인 → 코드문법강조(Syntax highlight) 를 꼭! 해지해주어야 적용이 된다
(나는 이걸 몰라서 한참 헤맸다...)
번외
- 코드 폰트 변경 & 박스 모서리 둥글게 만들기
pre code {
font-family: "consolas", monospace;
line-height: 1.3;
}
pre code.hljs {
padding: 10px; margin: 15px 0; max-width: 100%;
overflow-x: auto; overflow-y: hidden; border-radius: 7px; line-height: 130%;
}위의 코드를 CSS코드 맨 밑에 붙여 넣어주면 된다
위의 코드는 (https://tuttozurich.tistory.com/19) 님의 글을 참고하였다.
'내가 보려고 정리하는 > ETC' 카테고리의 다른 글
| 11/14 수업 정리 (0) | 2022.11.14 |
|---|---|
| 마크다운 사용법 (0) | 2022.11.05 |
