[티스토리 꾸미기] 코드블록 디자인 변경

준비 과정

티스토리 관리자 > 꾸미기 - 스킨 편집 > html 편집

+ 만약 이전에 플러그인에서 '코드 문법 강조'를 적용했다면 해제하기

1. 테마

1) 아래 사이트에서 원하는 테마 고르기

https://highlightjs.org/static/demo/

highlight.js demo

highlightjs.org

2) 테마 이름 변경하기

(1) 대문자는 소문자로 변경

(2) 띄어쓰기는 -(하이픈)으로 변경

ex) Github Dark → github-dark

ex) Base16 / Ashes → base16/ashes

3) html의 <head> </head> 사이에 코드 추가하기

<!-- 코드블럭 라이브러리 추가 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/github-dark.min.css"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script> 
<script>hljs.initHighlightingOnLoad();</script>

2. 폰트

1) 아래의 사이트에서 원하는 폰트 고르기

https://fonts.google.com/

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

2) 폰트 복사하기

3) html의 <head> </head> 사이에 코드 추가하기

<!-- 코드블럭 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

4) css에 코드 추가하기

 /* 코드블록 폰트 style */
pre > code {
	font-family: '폰트 이름', monospace !important;
	font-size: 15px;
}

- font-family: 폰트 이름

- font-size: 폰트 사이즈

- (그 외 필요하다면 다른 블로그에서...)

3. 라인 넘버

1) html의 <head> </head> 사이에 코드 추가하기

<!-- Line Number 적용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

2) css의 맨 아래에 코드 추가하기

/* Line Number 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: #B5B5B5;
	border-right: 1px solid #B5B5B5;
	vertical-align: top;
	width: 20px;
	padding-left: 0px;
}
 
/* your custom style here */
.hljs-ln td.hljs-ln-code {
	padding-left: 15px;
}