tistory

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

2023. 2. 17. 20:56
목차
  1. 1. 아래 링크에 들어가서 설명대로 hELLO 스킨을 적용한다.
  2. 2. hilight-line-number를 적용하고 싶은 분들
  3. highlihgt-line-number 적용방법
728x90
반응형

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

https://pronist.dev/5

 

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

hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기

pronist.dev

 

 

 

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

Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.

github.com

 

적용방법은 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;
}

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

728x90
반응형
  1. 1. 아래 링크에 들어가서 설명대로 hELLO 스킨을 적용한다.
  2. 2. hilight-line-number를 적용하고 싶은 분들
  3. highlihgt-line-number 적용방법
우주유령
우주유령
우주유령
우주
우주유령
전체
오늘
어제
반응형
  • 분류 전체보기 (131)
    • javascript (28)
    • java (26)
    • Web (16)
    • React (7)
    • SQL (2)
    • Spring (20)
    • IntelliJ (6)
    • JSP (1)
    • Notion (1)
    • VScode (8)
    • Vue (3)
    • css (1)
    • tistory (1)
    • jpa (8)
    • 책 (1)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

최근 글

hELLO · Designed By 정상우.
우주유령
[tistory] 티스토리 hELLO 스킨 변경, highlight-line-number추가
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.