티스토리 코드블럭 highlight.js 테마, line number, 스크롤, 폰트 적용하기

 

HTML

  <!-- 코드블럭 라이브러리 -->
  <link rel="stylesheet" href="https://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 src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
  </script>

 

CSS

 

폰트 & 사이즈, 스크롤 추가 등~

code {
	font-family: 'Consolas', 'Nanum Gothic Coding';
	font-size: 13px;
	white-space: pre;
	max-width: 850px;
	max-height: 600px;
	overflow: auto !important;
}

 

line number

/* 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;
	vertical-align: top;
	padding-right: 5px !important;

	/* your custom style here */
}

/* for block of code */
.hljs-ln-code {
	padding-left: 10px !important;
}

 

모바일에서 라인넘버 넓이가 이상해서  /* Media Screen - Mobie */ 에서 이 부분 주석처리함

	.entry-content table {
		width: 680px;
		/* table-layout: fixed; */
	}

 

 

 

 

전체 폰트 변경하기

/* Type Selector Reset */
body {
	font-weight: 400;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1em;
	line-height: 1.25;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

 

본문 줄간격 조절 line-height

.entry-content p {
	margin-bottom: 24px;
	font-size: 0.9375em;
	/* line-height: 1.6; */
	line-height: 2;
	color: #666;
}

 

 

 

 

 

 

 

 

 

 

 

참고

https://toproot.tistory.com/29

[T-Story] 코드블럭 테마, 스크롤, 라인넘버 추가하기(오디세이 테마)