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

1. 아래 링크에 들어가서 설명대로 hELLO 스킨을 적용한다.

https://pronist.dev/5

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

 

 

 

2. hilight-line-number를 적용하고 싶은 분들

 

이미 highlight.js는 적용이 되어있지만, 나는 line-number까지 적용하고 싶었다.

https://github.com/wcoder/highlightjs-line-numbers.js/

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js

 

적용방법은 v4.x 버전부터 바뀌어서, 적용하는데 약간의 어려움이 있었지만, hELOO의 깃헙이슈를 찾다보면 해결방법을 찾을 수 있었다.

 

highlihgt-line-number 적용방법

관리자 > 스킨편집 > html편집 모드로 들어가서

 

html의 </body>태그 아래에 코드를 입력해준다.

<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>

 

또 css의 제일 아래에 아래 css를 입력해준다.

/* for block of numbers */
#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;
}

/* for block of code */
#content .hljs-ln-code {
    padding-left: 10px;
}

하 내가 이것때매 두시간을...