[블로그 커스텀] 티스토리 코드블럭 커스텀하기 (Feat. highlight.js)

1. 코드블럭 배경 색상 변경
2. 코드블럭 글씨 색상 커스텀
3. 인라인 넘버 추가 & 폰트 변경
4. 인라인 넘버 안 될 때
다음 할 일

어제 블로그에 MAC 스타일 코드블럭 테마 적용하려고 했는데

COPY 블럭이 안 먹히는 문제 & window에서 코드블록 깨지는 현상으로 원상복구 했다.

내 블로그는 다크모드 막아놨는데 코드블럭만 다크모드로 나오게 해 주고 싶어서

그래서 그냥 다크모드로 직접 커스텀 하기로 했음

참고로 나는 heLLO 스킨 사용중 + 다크모드 강제로 해제 + 코드블럭인라인넘버 추가

해 놓은 상태에서 시작함

완성작 (코드 카피 버튼은 별도로 포스팅 할 예정)

1. 코드블럭 배경 색상 변경

스킨편집 > html편집 > css 편집 > pre code 검색

해당 블럭 주석 처리

 #content .contents_style pre code {
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 1.5
}

아래 코드 적용

 /* 코드블럭 배경색 블랙 & border-radius */
#content .contents_style pre code {
	background-color: #292A2D !important; // 블랙 배경
	border-radius: 0.75rem; // 테두리 둥글게
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 1.5
}

이 과정은 코드블럭 색상을 수동으로 변경 해 주고, 코드블럭의 각진 테두리를 둥글게 해 주는 과정이다.

pre code에 background-color, border-radius 속성을 넣어 주었다.

여기까지 코드 블럭 배경은 어둡게 바꿨는데 이제 글씨가 잘 안 보인다.

티스토리 Syntax Highlighter 플러그인에서 다크 모드를 지원하지만 코드 색상이 안 예뻐서

highlight.js 웹사이트에 가서 마음에 드는 테마로 꾸며줄 예정이다.

먼저 티스토리 Syntax Highlighter 플러그인 해제 해 주자

혹시라도 충돌이 나거나 변경한 값이 안먹힐 수 있기 때문

2. 코드블럭 글씨 색상 커스텀

highlightjs 웹사이트의 DEMO 탭 들어가면 원하는 테마를 테스트 해 볼 수 있음

왼쪽 하단에 코드를 붙여넣기 하고 이것저것 골라 보면 우측에서 화면에 어떻게 보이는지 바로 확인 할 수 있다.

https://highlightjs.org/download

Download a Custom Build - highlight.js

highlightjs.org

나는 다크모드에 어울리는 vs2015를 골라 주었다. 골랐으면 DOWNLOAD 탭 가서 zip파일 다운받기

준비물

1. highlight.min.js

2. sytles 폴더 안에 있는 vs2015.min.css

(나는 vs2015이지만 개인에 따라 원하는 테마 파일명이 다름)

블로그 설정 > 스킨 편집 > html 편집 > 파일업로드에 가서

1. highlight.min.js

2. sytles 폴더 안에 있는 vs2015.min.css

위 두 가지 파일 등록

그 다음은 html 편집으로 가서 아래 태그 4줄을 복사해서 <head> 안에 넣어준다.

그냥 </head> 바로 위에 넣으면 된다.

나는 vs2015.min.css이지만 만약 다른 테마를 선택했으면 그 테마의 파일명이 들어가주어야 한다.

 <!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/vs2015.min.css">
<script>hljs.initHighlightingOnLoad();</script>

3. 인라인 넘버 추가 & 폰트 변경

적용 후 css 편집으로 가서 인라인 넘버 코드를 추가 해 주고, 폰트를 변경해줄 것이다.

아래 코드 복사해서 css 맨 밑에 추가 해 주기

나는 이미 인라인넘버가 적용 되어 있었는데 혹시 충돌할까봐 << 주석처리 하고 다시 추가하였음

 pre code {
	font-family: "consolas", monospace;
	font-size:0.9rem;
	line-height: 1.3;
}
 
pre code.hljs {
	padding: 10px; margin: 15px 0; max-width: 100%;
	overflow-x: auto; overflow-y: hidden; border-radius: 7px; line-height: 130%;
}
 
.hljs {
	white-space: pre;
	overflow-x: auto;
}
 
/* 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: 2px solid #CCC;
	vertical-align: top;
	padding-right: 10px !important;
	/* your custom style here */
}
 
/* for block of code */
.hljs-ln-code {
	padding-left: 15px !important;
}

4. 인라인 넘버 안 될 때

위 코드 추가했는데도 인라인 넘버가 안 되면 다시 html 편집으로 넘어오기

</body>위에 아래 스크립트 태그 두 개 추가해보자

 <script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script>
<script>
  window.addEventListener('load', () => {
    hljs.initLineNumbersOnLoad()
  })
</script>

적용누르고 test 포스팅 작성 해 보았다

작동이 잘 된다.

이 전 MAC테마 커스텀에는 코드블럭이 조금만 길어지면 상하 스크롤이 생기고 코드에 인라인넘버 한줄이 더 생기는 문제가 있었는데 highlight.js로 테마를 바꾸고 나서는 그 문제들은 자동으로 해결되었다.

다음 할 일

코드블럭 Copy(복사)버튼 만들기
글 상단 썸네일 => 왼쪽으로 붙이고 미모지 아이콘으로 넣기

'BlogCustom' 카테고리의 다른 글

[블로그 커스텀] heLLO스킨 헤더 편집 (아이콘 추가, hover 효과) (5)	2024.11.11
[블로그 커스텀] 티스토리 마우스 이펙트 추가하기🧞‍♂️ (9)	2024.11.11
[블로그 커스텀] 티스토리 hELLo 스킨 본문 너비(폭) 늘이기 (12)	2024.11.09
[블로그 커스텀] 티스토리 코드블럭 폰트 바꾸기 (Feat. Google Fonts) (10)	2024.11.09
[블로그 커스텀] 티스토리 코드블럭에 인라인 넘버 적용하기 (css, js 코드) (5)	2024.11.09

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

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

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

[블로그 커스텀] 티스토리 코드블럭 커스텀하기 (Feat. highlight.js)

1. 코드블럭 배경 색상 변경

2. 코드블럭 글씨 색상 커스텀

3. 인라인 넘버 추가 & 폰트 변경

4. 인라인 넘버 안 될 때

다음 할 일

'BlogCustom' 카테고리의 다른 글

1. 코드블럭 배경 색상 변경

2. 코드블럭 글씨 색상 커스텀

3. 인라인 넘버 추가 & 폰트 변경

4. 인라인 넘버 안 될 때

다음 할 일

'BlogCustom' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	#content .contents_style pre code {
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 1.5
	}

	/* 코드블럭 배경색 블랙 & border-radius */
	#content .contents_style pre code {
	background-color: #292A2D !important; // 블랙 배경
	border-radius: 0.75rem; // 테두리 둥글게
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 1.5
	}

	<!--Syntax Highlighter-->
	<script src="./images/highlight.min.js"></script>
	<link rel="stylesheet" href="./images/vs2015.min.css">
	<script>hljs.initHighlightingOnLoad();</script>

	pre code {
	font-family: "consolas", monospace;
	font-size:0.9rem;
	line-height: 1.3;
	}

	pre code.hljs {
	padding: 10px; margin: 15px 0; max-width: 100%;
	overflow-x: auto; overflow-y: hidden; border-radius: 7px; line-height: 130%;
	}

	.hljs {
	white-space: pre;
	overflow-x: auto;
	}

	/* 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: 2px solid #CCC;
	vertical-align: top;
	padding-right: 10px !important;
	/* your custom style here */
	}

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

	<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script>
	<script>
	window.addEventListener('load', () => {
	hljs.initLineNumbersOnLoad()
	})
	</script>