개발 블로그 tistory hELLO 스킨 적용기

블로그 이주를 결심했던 이유가 velog 의 통계 기능, 카데고리 기능 없음이 주였다.

 

근데 막상 티스토리를 만들어놓고 보니 그 많은 글들을 옮기는 것도 일이고,

스킨이나 광고를 커스텀하는 것도 일이라 차일피일 미뤄왔는데, 

이제는 더 이상 미룰 수 없다... 바이브로 시작하려고 한다.

 

 

 

원래 사용하고 싶었던 테마는 이런 테마이다.

https://sweet-myo.tistory.com/650

디자인 적인 감성이 있고, 특색 있는 테마를 사용하고 싶었는데,

개발 블로그에 제일 중요한 건 코드 가독성이기 때문에..

 

일단은 많은 개발자들이 사용하고 있는 hELLO 스킨을 적용하고,

사용하다가 불편한 것이 있으면 추가해보기로 결정했다.

나중에 공부해서 직접 커스텀 스킨을 만들 수 있으면 좋겠다...!!

https://pronist.tistory.com/5

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

 

 

 

커스텀

 

1. 코드 라인 넘버 추가

 

highlightjs 를 직접 다운로드 받아서 스킨에 넣어서 적용할 수도 있는데,

위의 글에 있는 방식대로 CDN 으로 적용했다.

 

스킨 편집 > html 편집 > </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>

 

스킨 편집 > html 편집 > CSS > 맨 마지막에 아래 코드 추가

#content .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: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;
}

#content .hljs-ln-code {
    padding-left: 10px;
}

 

참고 : https://wouldyou.tistory.com/105

[tistory] 티스토리 hELLO 스킨 변경, highlight-line-number추가

 

 

2. 코드 하이라이팅 변경

긁어서 넣은 코드가 다크모드에서만 제대로 보이고,

라이트모드에서는 글씨가 흰색이라 보이지가 않아서 이거에 대한 해결책이 필요했다.

일단 테마부터 바꿔봤는데

 

스킨 편집 > html 편집 > </head> 앞에 아래 코드 추가

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/panda-syntax-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

 

 

https://highlightjs.org/demo

위의 highlightjs 데모 페이지에서 하나씩 다 눌러보면서

내 맘에 들면서 다크모드 테마이되 주석 가독성도 좋은 테마들을 추려서 블로그에 설정해보고 추렸다.

 

• atom-one-dark
• gml
• hybrid
• monaki - xcode 랑 젤 비슷함
• night-owl
• panda-syntax-dark : 현재 적용 중

 

블로그 쓰기 심심할 때 한번씩 바꿔볼 예정.

 

참고 :  https://watanuki.tistory.com/12?category=1040008

[HTML/CSS] 티스토리 코드블럭 테마 커스터마이징

 

 

3. 배경 색상 변경

 

라이트모드랑 다크모드에 코드 테마를 다르게 설정하는 방법이 있을 것 같은데 왜 안될까...?

일단 css 에서 코드 블럭 색상을 다크모드로 고정하는 방법을 사용했다.

 

스킨 편집 > html 편집 > CSS > hljs 로 검색해서 244 244 246 으로 된 컬러를 다크모드와 똑같이 변경

#content .contents_style pre code.hljs {

  --tw-bg-opacity: 1;

  /* background-color: rgb(244 244 246 / var(--tw-bg-opacity)) */
  background-color: rgb(41 42 45 / var(--tw-bg-opacity))
}

.dark #content .contents_style pre code.hljs {

  --tw-bg-opacity: 1;

  background-color: rgb(41 42 45 / var(--tw-bg-opacity))
}

 

 

참고 : https://searching-fundamental.tistory.com/61