티스토리 블로그 hELLO 스킨 설정 | 코드블럭 highlight.js, 라인 넘버 추가, 인라인 코드, 하이퍼링크 색상 변경, 이미지 팝업

예전부터 hELLO 스킨을 사용하고 있었는데, 오랫동안 티스토리 블로그를 안들어오다가 오랜만에 들어와보니 오류가 많이 있었다. 이미지도 제대로 렌더링이 안되고 아이콘도 제대로 안뜨고... 찾아보니까 새롭게 업데이트된 버전을 다운받으라 그래서 4.2.0 버전을 다운받았는데 정말 많이 바뀌었다. 예전 3.x 버전보다 더 깔끔해진 느낌...? 목차도 생기고 폰트도 바뀌고... 마음에 든다.

 

근데 예전에 커스터마이징한 설정들이 다 날라갔다... 멘탈 바사삭...ㅠㅠ 특히 코드블럭... 앞으로 업데이트할 일이 종종 있을거 같아 남겨놓으려고 한다. 내 스킨 수정할 때마다 이 글도 계속 업데이트할 예정이다.

 

0. hELLO 스킨 다운로드

아래 사이트에서 파일을 다운로드 받고 '블로그 관리-꾸미기-스킨 변경-스킨 목록-스킨 등록'에 들어가서 다운받았던 파일들을 다 업로드한다. 그리고 '스킨 보관함'에 들어가면 스킨이 등록된 것을 확인할 수 있을 것이고, 적용을 누르면 된다.

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

 

자 이제부터 '스킨 편집'에 들어가서 html과 css를 열심히 바꿔보자... 참고로 나는 보라색을 좋아해서 보라보라하게 통일성을 주고자 한다ㅎㅎ히힣

 

1. 코드 블럭 색상 변경 with highlight.js

아래 highlight.js 사이트에서 언어를 선택하고 파일을 다운 받는다.

highlight.js

다운받은 파일에서 highlight.min.js 와 원하는 테마의 CSS 파일을 업로드해준다. 나는 rose-pine-moon.min.css 파일을 선택하였다. 극강의 보라돌이충

HTML 43번째 줄 쯤 </head>바로 위에 아래 코드를 삽입한다. 이 때 href에는 본인이 선택한 파일을 넣는다.

    <!--Syntax Highlighter-->
    <script defer src="./images/highlight.min.js"></script>
    <link rel="stylesheet" href="./images/ros-pine-moon.min.css">
    <script> 
        window.onload = function() { 
            hljs.highlightAll(); 
            hljs.initLineNumbersOnLoad() 
      }
    </script>

그리고 CSS 부분도 변경해주어야 코드블럭 배경색이 테마에 맞게 변한다. 아래와 같이 기본으로 설정되어 있는 pre code 부분을 주석 처리 한다.

이렇게 했는데도 잘 적용이 되지 않는다면 티스토리 플러그인에서 'Syntax Highlight'를 사용 해제하면 된다.

 

2. 코드 블럭 라인 넘버 추가 / 모서리 둥글게 / 가로 스크롤 추가 / 폰트 변경

앞서 HTML에서 syntax highlighter을 추가했던 바로 아래에, 즉 </head>바로 위에 아래 코드를 삽입한다.

    <script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script> 
    <script> 
        window.onload = function() { 
            hljs.highlightAll(); 
            hljs.initLineNumbersOnLoad() 
      } 
    </script>
  </head>

이거 때문에 한 2시간동안 삽질했는데, 다른 블로그에 많이 있는 코드로 했는데 계속 적용이 안되는 것이었다. 한참 검색을 해보니 hELLO 스킨 4.x 버전 이후부터는 지연 로딩을 구현하도록 코드가 많이 바뀌어서 그냥 <scripts src>로 부르면 안되고 <script defer src>로 불러오고 load 이벤트에 등록해야 된단다. 자세한 건 아래 링크를 참고하면 좋을 것 같다.

코드블록에 Line Number를 추가하려면 어떻게 해야 하는지요? · tidory/hello · Discussion #179

그리고 CSS 맨 아래 부분에 아래 코드를 삽입한다. 디테일은 각자 취향에 맞게 설정해주면 된다.

pre code {
    font-family: "consolas", monospace;
    font-size: 1rem;
    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%;
}

.hljs {
    white-space: pre;
    overflow-x: auto;
}

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 2px solid #CCC;
    vertical-align: top;
    padding-right: 10px !important;
    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 15px !important;
}

 

3. 인라인 코드 색상 변경

인라인 코드가 기본적으로 회색 배경에 검은색 글씨이길래 이를 회색 배경에 보라색 글씨로 변경하고자 한다. CSS에서 p code을 찾아 아래와 같이 변경하였다. 한 2534번째 줄에 위치해있다.

#content .contents_style p code,
#content .contents_style ol[data-ke-list-type] code,
#content .contents_style ul[data-ke-list-type] code,
#content .contents_style table[data-ke-align] code,
#content .contents_style blockquote[data-ke-style=style2] code,
#content .contents_style blockquote[data-ke-style=style3] code {

  position: relative;

  top: -1px;

  white-space: normal;

  --tw-bg-opacity: 1;

  background-color: rgb(244 244 246 / var(--tw-bg-opacity));

  padding-left: 0.5rem;

  padding-right: 0.5rem;

  padding-top: 0.125rem;

  padding-bottom: 0.125rem;

  /*font-family: SUIT, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/

  font-family: "consolas", monospace;

  font-size: 0.9rem;

  line-height: 1.25rem;

  --tw-text-opacity: 1;

  color: rgb(75 39 126 / var(--tw-text-opacity));

  border-radius: 5px;
}

background-color은 그대로 두었고, font-family와 color만 수정하였다. 그리고 border-radius도 추가하였다.

짠 이렇게 회색 배경에 보라색 글씨로 바뀌었다.

 

4. 하이퍼링크 색상 변경

하이퍼링크 색깔도 기본적으로 빨간색으로 설정되어 있는 것을 보라색으로 바꾸고자 한다.

하이퍼링크 색상이 빨간색이다.

CSS 코드에서 하이퍼링크 부분을 찾기 힘들었다... 겨우 찾음... 이 부분에서 color을 아래와 같이 바꾼다.

#content .contents_style p a,
#content .contents_style ol[data-ke-list-type] a,
#content .contents_style ul[data-ke-list-type] a,
#content .contents_style table[data-ke-align] a,
#content .contents_style blockquote[data-ke-style=style2] a,
#content .contents_style blockquote[data-ke-style=style3] a {

  display: inline-block;

  --tw-text-opacity: 1;

  color: rgb(75 39 126 / var(--tw-text-opacity))
}

rgb(255 85 68) -> rgb(75 39 126) 으로 변경하였다.

짠 보라색 완성!

추가적으로 다크모드에서의 색상도 바꾸어보았다.

원래는 이렇게 파란색이었는데...

.dark #content .contents_style p a,
.dark #content .contents_style ol[data-ke-list-type] a,
.dark #content .contents_style ul[data-ke-list-type] a,
.dark #content .contents_style table[data-ke-align] a,
.dark #content .contents_style blockquote[data-ke-style=style2] a,
.dark #content .contents_style blockquote[data-ke-style=style3] a {

  --tw-text-opacity: 1;

  color: rgb(196 167 231 / var(--tw-text-opacity))
}

rgb(93 176 215) -> rgb(196 167 231) 으로 변경하였다.

짠 다크모드에서도 연보라색이다.

 

5. 이미지 클릭 원본 팝업 안나오는 문제 해결

저번에 카카오 데이터센터 화재 이후 생긴 트러블이라고 한다. <head> 바로 아래에 아래 코드를 삽입한다.

<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>

 

아 아직 할 게 한참 남았네... 

6. (예정) 기본모드에서도 백틱으로 인라인 코드 삽입

 

7. (예정) 글쓰기 버튼, 링크 연동

 

8. (to do) 라이트모드에서 코드 진하게 나옴 / 다크모드에서 글씨 검은색 문제 해결

 

9. (to do) 제목 여백 설정

 

10. (to do) 썸네일 기본 이미지 설정

 

11. (to do) 글씨체 조금 키우기 / 인용 글자색, 크기 변경

 

차근차근 해결해볼게요... 이정도면 거의 뜯어고치는 수준인데..?