1. 준비사항
만약 Tistory에서 제공하는 코드블럭 플러그인을 쓰고 있다면 이를 먼저 해제하자.
안쓰고 있다면 다음 단계로~
highlight.js demo
highlightjs.org
위 링크에서 자신이 원하는 테마를 찾자. 마음에 드는 테마를 찾았다면 그 녀석의 이름을 유심히 봐야한다.
2. 코드블럭 테마 입히기
블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html편집 에서 HTML의 <head> 부분에 아래의 코드를 입력해주자.
<!-- codeblock -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
이 때, 위 코드상 세번째 줄의 default.min.css 부분에서 'default' 부분에 앞서 유심히 봐둔 마음에 드는 테마의 이름을 입력해줘야한다. 테마의 이름은 소문자로 입력해주면 되고, 만약 띄어쓰기가 있다면 하이픈 (-)으로 표현하자.
예를 들어, Base16/Material Palenight 를 적용하고 싶다면 아래와 같이 입력하면 된다.
<!-- codeblock -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/base16/material-palenight.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>이제 코드블럭에 테마가 생겼다!
3. 글꼴 설정하기
내친김에 글꼴도 바꿔보자. 역시 html 편집에 들어가되, 이번에는 CSS에서 samp를 찾자 (ctrl+F 활용)
여기서 font-family 부분에 원하는 폰트를 입력해주자. 말 그대로 CSS편집일뿐이다.
나의 경우는 -apple-system 을 골랐다.
4. 코드블럭 바깥 여백 줄이기
이쯤이면, 코드블럭이 알록달록해지고 글꼴도 둥글둥글 해졌지만, 바깥 여백이 너무 거슬린다.
여백 따윈 없애버리자. 사치다.
마찬가지로 CSS에서 .article-view pre를 찾은 뒤, padding 값을 원하는 수치로 수정하자.
5. 코드블럭에 라인넘버 표시하기
이제 좀 그럴싸해보이지만 아직 만족하긴 이르다. 라인 넘버가 없지 않은가?! 라인 넘버 없는 코드블럭은 코드블럭이 아니다. 당장 추가해주자.
이번에는 아래의 코드를 HTML의 <head> 태그 안에 넣어주자.
단 이번에는 아무 곳에나 넣지는 말고, 앞서 넣어준 코드블럭 테마를 위한 script 코드 뒤에 넣자.
<!-- codeblock line number -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script> hljs.initLineNumbersOnLoad();</script>
그리고 아래의 코드를 CSS에 추가해주자
/* 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: rgb(169, 169, 169);
vertical-align: top;
padding-right: 5px !important;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 10px !important;
}짜잔 완성이다!
6. 주인장.. 이게 맞아? 싶을 때의 해결방법
가끔 티스토리 자체 테마와 highlightjs의 linenumber가 충돌하는 경우가 있다. 이런 경우 위와 같은 못생긴 결과가 나온다..
테마에 따라 양상은 다양하겠지만, 내가 쓰는 테마인 Odyssey 의 경우 위와 같이 코드블럭이 border로 둘러쌓이는 바람에 CSS 작업을 통해 border를 제거해줘야 했다. 다시 말하지만, 자신이 티스토리에 어떤 테마를 적용하고 있는지에 따라 해결방법이 조금씩 상이하다.
하지만 핵심 원리는 동일하다.
F12를 눌러서 개발자 도구로 들어간 뒤, 어떤 속성이 못생김의 근원인지를 찾아내어 이를 제거하면 된다.
귀찮을 뿐이지 어려운 작업은 아니다.
아래는 위 스샷 부분의 코드를 긁어온 것
.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:not(.hljs-ln-line) {
padding: 7px;
border-left: 1px solid #dadce0;
}
.article-view table tr {
border-bottom: 1px solid #dadce0;
}
.article-view table.hljs-ln
{
border: none !important;
border-collapse: unset !important;
}위 코드를 CSS에 적어주고 나면 아래와 같이 정상적으로 출력된다.
끝!
'Learning-Log > Computer Science' 카테고리의 다른 글
| [WSL] Ubuntu에서 현재 디렉토리를 윈도우 탐색기로 열기 (0) | 2022.07.11 |
|---|---|
| [NestJS] NestJS, 한 번 빠지면 벗어날 수 없는 마성의 늪(1) : 소개 (0) | 2022.07.11 |
| [TS] 타입스크립트의 기초(2) - Class와 상속, 그리고 interface와 type의 차이점 (0) | 2022.07.05 |
| [TS] 타입스크립트의 기초(1) - type 키워드 및 Type에 대한 이해 (0) | 2022.07.05 |
| [TS] 타입스크립트 Generic에 대한 이해와 활용 (0) | 2022.07.01 |