기존에 쓰던 스킨에서 벗어나 정상우님께서 만들어주신 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; /* 스크롤바 마우스 오버 시 색상 설정 */
}
이렇게 설정하면 아래와 같은 가로 스크롤이 적용된다. 다음에는 메뉴 바와 목차 등을 수정해봐야겠다.
