티스토리 hELLO 스킨 커스텀

제 티스토리 블로그에는 아주 깔끔한 hELLO 스킨을 적용했습니다.

하지만 기본값을 쓰다보면 조금이라도 커스텀을 하고 싶은게 개발자의 본능이 아니겠습니까.....?

 

그래서 이 글을 통해 제가 커스텀한 과정을 기록해두고자 합니다!

혹시라도 버전 문제로 삽질을 하고 계신 분들께 도움이 될수도 있고, 추후 업데이트를 할 때 제가 참고하게 될수도 있으니까요 :)

 

커스텀 과정에서 주로 참고한 블로그는 포스팅 맨 아래에 첨부하도록 하겠습니다.

 

1. 오리지널 스킨 링크

https://pronist.tistory.com/5

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

https://github.com/tidory/hello

GitHub - tidory/hello: 😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨

2. highlight.js 적용

사실 티스토리에는 기본으로 제공해주는 코드 하이라이트 기능이 있습니다.

하지만 이게 별로 마음에 안들어서 바꾸고 싶었어요 ㅎㅎ

이럴 때에는 가장 먼저 기본으로 적용된 스타일을 해제해주셔야 합니다! 

이 기능은 관리자 페이지 > 플러그인 > 코드 문법 강조 에서 찾을 수 있습니다.

 

그 이후 필요한 파일 설치 과정은 이 분의 블로그 글을 참고해주세요 :)

참고로 제가 선택한 테마는 night-owl입니다!!

 

HTML에 추가해야하는 코드는 다음과 같습니다.

<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/night-owl.min.css">
<script>hljs.initHighlightingOnLoad();</script>

 

배경색 어둡게 고정하기

또 마음에 들지 않는 부분이 있습니다. 

티스토리가 라이트 모드일 때에도 코드 블럭은 다크 모드처럼 어두운 배경을 지정하고 싶습니다.

아예 모드 자체를 고정하는 방법은 모르지만 코드 블럭의 배경색을 어둡게 고정할수는 있습니다.

다음 코드를 CSS 탭에서 추가해주세요!

ctrl + F > pre code 를 검색하고 배경색을 지정해주는 것입니다.

그 후 CSS 파일 맨 하단에 다음 코드를 추가해주세요! (참고 블로그에서 가져온 코드입니다.)

클래스 이름 색상 변경하기

이로써 배경색은 성공적으로 바뀌었을 것입니다.

하지만 .. 클래스 색깔이 너무 못생겼습니다. 

다음 이미지처럼 진한 보라색이라 잘 보이지가 않아요.... 그래서 아래 main의 색깔과 똑같이 맞춰주려고 합니다!!

그러기 위해 일단 색부터 따옵니다.

저는 ColorPick Eyedropper 라는 크롬 확장 프로그램을 통해 색상을 추출했습니다.

그리고 스타일을 적용해줄 요소를 찾습니다.

개발자 도구를 이용하여 해당 요소의 클래스를 찾았습니다!!

CSS 파일 하단에 다음 코드를 추가해주세요.

.hljs-title.class_ {
  color: #DCDCAA !important;
}

성공적으로 잘 바뀌었습니다!!

3. highlight 기능 확장 (Line number 추가 등)

코드의 가독성을 높이기 위해 몇 가지 기능을 추가하였는데, 이 부분도 이 분의 블로그 글을 주로 참고해서 진행했습니다.

그런데 hELLO 스킨의 버전 업데이트로 인해 잘 적용되지 않는 부분이 있어서 스킨 개발자분의 블로그에 있는 코드를 추가적으로 활용하였습니다.

무작정 삽질하기 전에 FAQ를 꼼꼼히 읽어보는 것은 기본중의 기본임을 다시 한 번 느끼고 갑니다 ^^!

 

추가된 기능은 다음과 같습니다.

• Line Number 추가
• 폰트 및 글자 크기 변경
• 박스의 모서리 둥글게하기
• 가로스크롤 기능 추가

HTML에 추가해야하는 코드는 다음과 같습니다.

<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script>
<script>
    window.addEventListener('load', () => {
        hljs.initLineNumbersOnLoad()
    })
</script>

개발자분의 블로그 FAQ

변경한 코드 블럭 스타일 예시

위 이미지는 제가 변경한 코드 블럭 스타일입니다.

참고한 블로그

티스토리 스킨 적용하기 (feat. hELLO, highlight.js)

참고할 블로그

hELLO 스킨 커스텀

[티스토리] hELLO 스킨 커스텀 - 글 상단바에 카테고리 나타내기