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

준비 과정

티스토리 관리자 > 꾸미기 - 스킨 편집 > 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;
}

3) 만약 적용한 코드가 이렇게 보인다면... css의 table을 수정하자

<코드 수정 전>

<코드 수정 후>

<코드 수정 전>

<코드 수정 후>

출처

https://dailylifeofdeveloper.tistory.com/361

https://one-hour.tistory.com/34

저작자표시 비영리 변경금지 (새창열림)

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

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

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

빵먹는중_ITing_🍞

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

준비 과정

1. 테마

2. 폰트

3. 라인 넘버

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<!-- 코드블럭 라이브러리 추가 -->
	<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>

	<!-- 코드블럭 폰트 -->
	<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">

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

	<!-- 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>

	/* 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;
	}