[hELLO 스킨] 티스토리 블로그 코드 스타일 변경하기(highlight)

2023. 9. 18. 19:57· StyleSeet/CSS
목차
  1. 1. highlight.zip 파일 다운 받기
  2. 2. 티스토리 스킨 설정에 파일 업로드하기
  3. 3. HTML에 JS, CSS 파일 연결하기
  4. 4. 적용 확인하기 & 커스텀
  5. 1) 배경색 및 모서리 둥글게
  6. 2) 가로 스크롤 커스텀
반응형

 

기존에 쓰던 스킨에서 벗어나 정상우님께서 만들어주신 hELLO 스킨으로 돌아왔는데 다시 생각해도 이 스킨은 너무 잘 만들어진 것 같다. 무료로 이용할 수 있고 커스텀까지 가능하기에 개발자들에게도 인기 많은 스킨이라 지금부터는 직접 커스텀하여 나만의 블로그로 만들어보려고 한다. css도 연습할 겸! 좋은 스킨 너무 감사합니다~!

hELLO 스킨을 적용하고 보니 가장 먼저 수정하고 싶었던 부분이 바로 code box 부분이었는데 조금 더 눈에 잘 띄는 것으로 변경해보고 싶었다. 그래서 highlightjs 라는 라이브러리를 사용해 원하는 테마로 변경했다.

 

1. highlight.zip 파일 다운 받기

먼저 아래 사이트를 통해 파일을 다운로드 해주면 되는데 zip 파일을 다운받아 압축을 풀어주면 된다.

 

Download a Custom Build - highlight.js

 

highlightjs.org

 

파일을 받아 압축을 풀면 아래와 같은 파일들이 있는 것을 볼 수 있는데 이 중에서 highlight.min.js 파일을 티스토리 블로그 스킨 설정에 업로드해주어야한다.

 

2. 티스토리 스킨 설정에 파일 업로드하기

먼저, 티스토리 블로그 관리화면에 들어가서 스킨 편집을 클릭한다. 스킨 편집을 클릭하면 오른쪽 윗부분에 html 편집이 있는데 이 곳에서 파일 업로드를 할 수 있는데 하단의 + 추가 버튼을 클릭하여 highlight.min.js 파일을 업로드 한다.

 

그 후, 내가 원하는 code highlighting 테마도 업로드해주면 되는데 나는 material-palenight 테마를 이용하기로 결정했다. 해당 code 테마들은 기존에 다운 받은 zip 파일 안의 styles 폴더 안에 있으니 원하는 테마를 선택하여 업로드해주면 된다.

 

3. HTML에 JS, CSS 파일 연결하기

파일 업로드가 끝났다면 이제는 HTML에 업로드한 파일들을 연결해주는 작업이 필요하다.  HTML 탭에서 <head> 태그를 찾아준 후

 

 

</head> 태그가 끝나는 부분을 찾아 그 위에 아래 코드를 입력해준다. 윈도우 기준 Ctrl + F 를 눌러 </head>를 검색하면 바로 나오니 편하게 찾아주면 된다.

<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/내가 선택한 테마.min.css">
<script>hljs.initHighlightingOnLoad();</script>

 

4. 적용 확인하기 & 커스텀

여기까지 마무리했다면 적용, 저장을 눌러주고 내 블로그로 들어가보면 된다. 제대로 적용되지 않았다면 티스토리 플러그인에 있는 Syntax Highlight를 비활성화시켜주자.


1) 배경색 및 모서리 둥글게

배경색을 바꾸고 싶다면 아래의 부분을 찾아 배경색과 스타일을 원하는대로 커스텀하면 된다. 나는 1차적으로 배경색과 모서리 부분을 둥글게 변경했다.

#content .contents_style pre code.hljs {
  ...
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  ...
  border-radius: 7px; 
}

2) 가로 스크롤 커스텀

두번째로는 가로로 스크롤이 생길때 기본 스크롤이 마음에 안들었다. 그래서 가로 스크롤을 색상에 맞게 변경했다.

#content .contents_style pre code.hljs::-webkit-scrollbar {
  height: 10px;
}

#content .contents_style pre code.hljs::-webkit-scrollbar-track {
  width: 12px;
  background-color: #e4e4e4;
  border-radius: 100px;
}

#content .contents_style pre code.hljs::-webkit-scrollbar-thumb {
  width: 30px;
  background-color: #888; /* 스크롤바 색상 설정 */
  border-radius: 10px; /* 스크롤바 둥글게 */
}

#content .contents_style pre code.hljs::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 스크롤바 마우스 오버 시 색상 설정 */
}

 

이렇게 설정하면 아래와 같은 가로 스크롤이 적용된다. 다음에는 메뉴 바와 목차 등을 수정해봐야겠다.

Before
After

반응형
저작자표시 비영리 동일조건 (새창열림)
  1. 1. highlight.zip 파일 다운 받기
  2. 2. 티스토리 스킨 설정에 파일 업로드하기
  3. 3. HTML에 JS, CSS 파일 연결하기
  4. 4. 적용 확인하기 & 커스텀
  5. 1) 배경색 및 모서리 둥글게
  6. 2) 가로 스크롤 커스텀
'StyleSeet/CSS' 카테고리의 다른 글
  • CSS로 특정 위치 말줄임과 더보기 버튼 구현
  • CSS 선택자 종류와 사용법 공부하기
도잎
도잎
프론트엔드 개발 성장기록
도잎
JDevelog
도잎
전체
오늘
어제
반응형
  • 분류 전체보기 (149)
    • Web dev (48)
      • React (22)
      • Vue (8)
      • Next.js (6)
      • Node.js (2)
      • Springboot (2)
    • App dev (2)
      • Flutter (2)
    • Language (33)
      • javascript (30)
      • typescript (2)
      • java (1)
    • StyleSeet (3)
      • CSS (3)
      • Sass (0)
    • Database (2)
      • PostgreSQL (1)
    • DevOps (11)
      • Webpack (4)
      • Linux (3)
      • Docker (2)
      • Tomcat (1)
    • 개발지식 (2)
      • Web (1)
    • 항해99(6기) (20)
    • UXUI (0)
    • 알고리즘 (25)
    • 유용정보 (2)

최근 글

hELLO · Designed By 정상우.v4.2.1
도잎
[hELLO 스킨] 티스토리 블로그 코드 스타일 변경하기(highlight)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.