백준 문제풀이 코드를 올리는데 티스토리 코드블럭에서는 줄번호가 나오지 않는다는 걸 발견했다.
지금까지 올린 코드들은 다들 짧아서 현재는 큰 불편함을 못 느끼지만, 가독성을 생각했을 때 코드의 줄번호가 나오는 것이 좋다.
구글링을 해보니 이미 많은 유저가 티스토리 내 코드블럭 줄번호의 필요성을 깨닫고 적용하고 있었다.
결과를 먼저 보여드리자면 이런 식으로 바꾸었다. 줄번호나 코드블럭의 모양 혹은 색상 등을 본인 스타일대로 커스텀 할 수 있는 것이 좋은 것 같다. 그럼 시작! (*참고로 Odyssey 스킨을 사용했다.)
1. HTML 편집하기
블로그 관리 -> 꾸미기 -> 스킨편집 -> html 편집 위치로 들어간다.
맨 위에서부터 보면 <head>라는 태그가 보일거다. 쭉 내려가면 </head>가 보이는데 이 태그 바로 위에 아래 코드를 입력한다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>입력 후 오른쪽 상단의 '적용'을 누른다.
그럼 일단 줄번호는 출력이 될 것이다. 하지만 블로그 스킨에 따라 우리가 생각했던 결과를 얻지 못할 수 있다.
Odyssey 스킨 기준 코드블럭이 테이블 모양처럼 나와서 CSS도 살짝 바꿔주었다.
2. CSS 편집하기
먼저, 테이블처럼 나오는 현상을 고쳐보자.
스크립트 내에서 윈도우는 Ctrl + F / 맥은 Command + F를 누르면 검색창이 뜬다.
table 이라고 쳐서 밑으로 쭉 내려가다 보면 아래와 같은 코드가 나온다. (*엔터를 누르면 쉽게 내려가짐)
.article-view table {
border: 1px solid #dadce0;
border-collapse: collapse;
}
.article-view table thead tr {
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: #000;
}
.article-view table tr th,
.article-view table tr td {
padding: 7px;
border-left: 1px solid #dadce0;
}
.article-view table tr {
border-bottom: 1px solid #dadce0;
}
그럼 table 앞에 > 를 붙여주면 된다.
.article-view > table {
border: 1px solid #dadce0;
border-collapse: collapse;
}
.article-view > table thead tr {
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: #000;
}
.article-view > table tr th,
.article-view > table tr td {
padding: 7px;
border-left: 1px solid #dadce0;
}
.article-view > table tr {
border-bottom: 1px solid #dadce0;
}
이런식으로!
그럼 이제 줄번호가 제대로 출력되는 걸 볼 수 있다.
하지만 줄번호와 코드가 너무 가까워서 이 간격을 띄워주겠다.
방금 우리가 수정했던 코드 밑에 아래 코드를 넣자.
.hljs-ln-n{margin-right: 10px;}이렇게 margin값을 통해 여유공간을 만들어줬다.
그리고 항상 수정 후에는 '적용'누르기!!
+ 개인 커스텀
1. 회색 테두리 없애기
기존의 회색테두리 부분이 이질감이 있어서 변경해주었다. 아까처럼 검색창을 켜서 pre를 입력해 찾거나 아님 밑으로 조금 내리면
.article-view pre { <-요렇게 시작하는 부분이 있을거다.
여기 padding 값을 0으로 수정하면 아예 테두리가 사라진다.
.article-view pre {
padding: 3px; /* 이 곳! */
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}하지만 코드블럭 배경색이 밝은 회색이다 보니 테두리를 0으로 하면 흰색바탕과 구분이 잘 안돼서 한 3px정도로 해주었다.
2. 모서리 둥글게 하기
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
border-radius: 10px; /*여기에!*/
}code를 찾아서 border-radius: 10px; 를 입력해준다.
.article-view pre {
padding: 3px;
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
border-radius: 10px; /*여기에!*/
}*이렇게 하면 회색 테두리 안의 박스만 모서리 모양이 변한다. 나는 테두리도 같이 라운드지면 좋겠어서 같은 코드를 테두리한테도 추가해줬다.
3. 줄번호 옆에 직선표시
/* for block of numbers */
.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; /*0px는 직선 없어짐.*/
vertical-align: center;
padding-right: 5px;
line-height: 1.0em;
}
/* your custom style here */
.hljs-ln td.hljs-ln-code {
padding-left: 11px;
line-height: 1.5;
}줄번호와 코드 사이에 선 하나를 추가해서 분리감을 더해주었다. (아래 github 링크에서 코드를 가져와 수정함.)
코드를 넣는 위치는 크게 상관없는데 어디 넣을지 모르겠다면 바로 위에 있는 .article-view pre { ~~~~ } 요 코드 아래에 넣으면 된다.
그리고 '적용' 눌러주기!!!
결과는 다음과 같다!
+ 여담으로.. 깃헙에서 가져온 링크 그대로 쓰니깐 줄번호와 코드가 일직선으로 맞아떨어지지 않고 줄번호가 좀 더 높게 나오길래.. 그 오류를 수정하느라 좀 고생했다. 뭐를 건드려야 할지 몰라서 이것저것 변경해봤는데 그 과정에서 많은 걸 알게 되었다..
(13번줄 -> vertical-align: center; /*원래 center가 아닌 top이었는데 그럼 넘버가 코드보다 좀 더 위에 위치한다. top대신 left,center,right를 사용하면 일직선으로 잘 출력된다.*/)
[참고사이트]
https://bagineer.tistory.com/5
티스토리 코드블럭 라인넘버 적용 방법 / < highlight.js, highlightjs-line-numbers.js, 커스터마이징 >
제대로 된 첫 글을 쓰고 나서 글을 확인해 보았다. - 첫 글 2021/01/28 - [프로그래밍/Python] - 파이썬 소켓 프로그래밍 / 1. 서버 프로그래밍 #1 파이썬 소켓 프로그래밍 / 1. 서버 프로그래밍 #1 첫 번째
bagineer.tistory.com
https://highlightjs.org/download/
Getting highlight.js
Hosted A prebuilt version of highlight.js with 36 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig
highlightjs.org
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
https://life-is-potatoo.tistory.com/39
[티스토리 꾸미기] 코드 블럭에 line number 추가하기
코드 블럭에 줄번호를 넣으면 긴 코드를 읽을 때 훨씬 가독성에 좋다. 오늘은 코드블록 꾸미기 2탄 격인 코드블럭에 줄번호 넣는 방법에 대해 적어보겠다. 관련글 🔗 [티스토리 꾸미기] highlight.j
life-is-potatoo.tistory.com