[Tistory] hELLO 테마, highlight.js 적용 및 오류 해결 방법

검색하면 정말 많이 나오는 내용이지만,

그대로 따라했는데도 난 몇가지 오류를 겪었었고 그 과정에서 여러 포스트를 보게 되었다.

그래서 이번엔 내 버전으로 새로운 글을 작성해 보려고 한다.

혹시라도 나처럼 하나의 게시글로 해결되지 않은 사람들에게 도움이 되었으면 좋겠다!

hELLO 테마 적용하기

티스토리를 시작하면서 가장 먼저 한 일은 hELLO 테마 적용하기.

개발 블로그에서 아주 유명한 무료 테마라고 한다!

 

1. 일단 아래 링크에 접속해 다운로드 부분으로 이동, zip 파일 다운로드, 압축 해제

https://pronist.tistory.com/5?category=844785

hELLO 티스토리 스킨을 소개합니다.

2. 티스토리 관리자 페이지 > 스킨 변경 > 스킨 등록

추가버튼 클릭 후 다운로드 받은 hELLO 스킨 파일들 추가.

한번에 드래그 해서 올리면 되는데, 폴더에 있는 파일은 바로 옮겨지지 않음!!

반드시 파일목록에 hELLO 스킨 파일들이 모두 있는지 확인해야 함.

(난 그러지 않아서 갑자기 블로그가 무한 골뱅이로 로딩되는 현상이 발생했음,,ㅎ 다시 들어가서 파일 전부 추가해주면 됨!)

 

highlight.js 적용하기

1. 아래 링크에 접속, 체크박스 수정하지 않고 바로 다운로드 버튼 클릭

(스크롤 내리다 보면 download 버튼 있음)

https://highlightjs.org/download/

Getting highlight.js

2.관리자 페이지 > 스킨 편집 > HTML 편집 > 파일업로드

파일추가 버튼을 통해 다운로드 받은 파일 중 아래 두가지 파일을 업로드 함.

- highlight.min.js

- (원하는 테마).min.css

 

나같은 경우 highlight.min.js 파일과 Hybrid.min.css 파일을 업로드 했음.

 

(참고) 아래 링크에서 원하는 테마를 구경할 수 있음

내가 검색하면서 봤을 때는 Vs2015 가 제일 많았다.

나는 Hybrid 테마로 선택함

https://highlightjs.org/static/demo/

highlight.js demo

 

3. HTML 편집 > </head> 태그 바로 윗 부분에 아래 코드 4줄 추가

(3번째 줄의 ./images/vs2015.min.css 부분은 본인이 선택한 테마의 이름.min.css로 변경해야 함!

<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/Hybrid.min.css">
<script>hljs.initHighlightingOnLoad();</script>

 

4. 적용 버튼 클릭.

근데 이렇게 해도 난 소스코드의 테마가 변하지 않았다.

이런 경우 관리자 페이지 > 플러그인으로 이동

Syntax로 검색 시 Syntax Highlight 가 있는데 이게 켜져있다면 해제해 줘야 함!

 

---

게시글의 텍스트 색상이 뒤죽박죽인 경우

열심히 세팅 후 게시글을 올렸는데,

사진처럼 텍스트 색상이 뒤죽박죽이더라.

hELLO 테마에선 글자 색상을 변경하면 이런 현상이 발생하는 것 같은데,

난 딱히 색상은 건드리지 않고 글 안에서 내용 순서변경하느라 복붙한 것 밖에 없는데 이렇게 되어있었음...

우악 짜중나!

방법을 찾다가 결국 다시 타이핑하는 방법으로 해결했다(?)

계속 사용해보면서 익혀가야 하겠지만 일단은

글 작성할 때 복붙을 최대한 안하는 방향(?-서식이 망가지니까 ㅎ;)으로 해야겠다.

---

https://chchchanh.tistory.com/25

[블로그] 티스토리 스킨 추천 - hELLO

https://dawonny.tistory.com/370

hELLO, highlight.js 적용(feat. 글쓰기 버튼 만들기, 코드블럭 다크모드로 기본설정하기)

https://easy-code-yo.tistory.com/55

티스토리 개발 블로그에 hELLO 스킨 적용 (추가 수정한 부분들)