목 차
1. 들어가며
2. 사전설명
1) 코드블럭의 코드넘버(줄번호)
2) 코드블럭의 스크롤
3. 코드번호와 스크롤 적용
1) 코드블럭의 코드넘버(줄번호) 설명
2) 스크롤 적용하기
4. 마치며
1. 들어가며
지난 글에서는 Odyssey 스킨에 코드블럭을 적용하는 방법을 알아보았다.
이번 글에서는 코드블럭의 왼쪽에 코드넘버(줄번호) 및 스크롤 적용을 알아볼 것이다.
※ 작업 전, 티스토리의 HTML 및 CSS의 원본은 반드시 백업을 해두도록 하자.
2. 사전설명
1) 코드블럭의 코드넘버(줄번호)
- 개념 : 코드블럭의 왼쪽에 있는 숫자를 의미
- 설정 : 티스토리 HTML 편집에서 HTML 과 CSS를 수정
- 필요성 : 굳이 코드넘버가 필요없지만, 티스토리 내 코드의 가독성을 높여준다.
2) 코드블럭의 스크롤
- 개념 : 화면 하단
- 설정 : 티스토리 HTML 편집에서 CSS를 수정
- 필요성 : 코드가 길어서 다음 줄로 넘어가는 걸을 한줄로 만들어준다.
3. 코드번호와 스크롤 적용
1) 코드블럭의 코드넘버(줄번호) 설명
티스토리 HTML 편집에서 HTML 과 CSS를 수정한다.
① 먼저 HTML을 수정해보자
- 경로 : 티스토리 설정 > HTML 편집 > HTML
아래의 코드를 HTML의 <head> ... </head>에 넣어준다.
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
< 그림2-1>과 같이 12~13줄 정도에 넣어준다.
② CSS를 수정해보자.
< 그림2-3 > 및 < 그림2-4 >와 같이 CSS 2곳을 수정하면 된다.
아래 < 그림 2-2 >와 < 그림2-3 >을 확인해보자.
< 그림 2-2 >는 수정전(원본)이며, < 그림 2-3 >은 수정후이다. 원본은 반드시 백업을 해두자
< 그림2-3 >와 같이 5곳에 부등호( > )를 붙인다.
- ① (당초) .article-view table → (변경) .article-view > table
- ② (당초) .article-view table thead tr → .article-view table > thead tr
- ③ (당초) .article-view table tr th, → (변경) .article-view table tr > th,
- ④ (당초) .article-view table tr td → (변경) .article-view table tr > td
- ⑤ (당초) .article-view table tr → (변경) .article-view table > tr
※ < 그림2-3 >의 ⑤번의 0을 주목하자.
당초 padding 값이 20px였으나, 코드블럭의 테두리 회신 부분을 없애기 위해 padding 값을 0으로 수정하였다.
CSS에 아래의 코드를 추가한다.
/* 라인넘버 추가 */
.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: #B5B5B5; /* 라인넘버 색깔 */
border-right: 1px solid #B5B5B5;
vertical-align: top;
/* width: 30px; */
padding-right: -5px; /* 본문의 패팅값, 라인넘버 아님, 살려놓을 것, 라인넓이의 값과-본문의 컨턴츠와의 사이 */
text-indent: -4px; /* 줄넘버의 가로 길이 */
}
.hljs-ln-code {
padding-left: 5px !important;
padding-right: 5px !important;
}
< 그림2-4 >와 같이 CSS에 위의 코드를 추가해준다.
2) 스크롤 적용하기
1줄의 코드가 길어질 경우, 2번째 줄로 넘어가는 경우가 있다.
시각적으로 보기 안 좋은 경우가 발생하므로, 스크롤을 만들어서 한 줄로 만들어주자.
경로 : 티스토리 설정 > HTML 편집 > CSS
< 그림3 >과 같이 아래의 코드를 CSS의 맨 하단에 붙여준다.
/* 코드블럭 가로 스크롤 적용 */
.hljs
{
white-space: pre;
overflow-x: auto;
}
/* 코드블럭 가로 스크롤 적용 끝 */
CSS에 코드블럭의 가로 스크롤을 적용하였다.
스크롤은 가로/세로 모두 구현할 수 있으나, 가로 스크롤만 적용하였다.
세로 스크롤을 설정하면, 마우스휠로 페이지를 넘길 때, 코드블럭 영역이 마우스휠과 동시에 화면 이동이 되어 의외로 불편하기 때문에 필자는 가로 스크롤만 활용한다.
4. 마치며
코드블럭의 코드넘버(줄번호) 및 가로 스크롤 적용하는 방법을 알아보았다.
사용자 취향에 따라 적용 결정을 내려도 된다.
위에서도 이야기했지만, HTML과 CSS를 수정할 때는 본문(당초 내용)은 반드시 백업해 두도록 하자.
'5. 개인기록용 > 5-1. 티스토리 설정' 카테고리의 다른 글
| (티스토리) 오디세이(Odyssey) 스킨 (1) 코드블럭 설정하기 (2) | 2023.01.17 |
|---|