블로그 이주를 결심했던 이유가 velog 의 통계 기능, 카데고리 기능 없음이 주였다.
근데 막상 티스토리를 만들어놓고 보니 그 많은 글들을 옮기는 것도 일이고,
스킨이나 광고를 커스텀하는 것도 일이라 차일피일 미뤄왔는데,
이제는 더 이상 미룰 수 없다... 바이브로 시작하려고 한다.
원래 사용하고 싶었던 테마는 이런 테마이다.
https://sweet-myo.tistory.com/650
디자인 적인 감성이 있고, 특색 있는 테마를 사용하고 싶었는데,
개발 블로그에 제일 중요한 건 코드 가독성이기 때문에..
일단은 많은 개발자들이 사용하고 있는 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
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>
위의 highlightjs 데모 페이지에서 하나씩 다 눌러보면서
내 맘에 들면서 다크모드 테마이되 주석 가독성도 좋은 테마들을 추려서 블로그에 설정해보고 추렸다.
- atom-one-dark
- gml
- hybrid
- monaki - xcode 랑 젤 비슷함
- night-owl
- panda-syntax-dark : 현재 적용 중
블로그 쓰기 심심할 때 한번씩 바꿔볼 예정.
참고 : https://watanuki.tistory.com/12?category=1040008
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
'회고록' 카테고리의 다른 글
LG전자 HE본부 채용연계형 인턴 채용 프로세스 (코테, 인적성, AI 면접, 기술면접, 인턴 프로젝트) 회고 (1) | 2023.06.18 |
---|