티스토리 코드블럭 커스터마이징

티스토리에서 프로그래밍 언어라던지 html 등을 본문에 작성할 때 유용하게 사용할 수 있는 기능인 코드블럭

이 코드블럭이 너무 예쁘지 않아서 이번에 여러 블로그 글들을 참고해서 수정하였습니다.

현재 제 블로그에 적용된 코드블럭 소스입니다.

<!-- syntax highlight -->
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/rainbow.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
	
	
<!-- Gogle Font for syntax highlight -->
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<style>
	pre, code {
		font-family: 'Source Code Pro';
		line-height: 1.5;padding: 0px;font-size: 15px;
			}
</style>

 

제가 사용하고 있는 코드블럭을 그대로 사용하실 분은 위 내용을 복사한 다음 [블로그 관리] - [스킨 편집] - HTML 로 가셔서  태그 내에 붙여 넣으시면 됩니다.

 

https://highlightjs.org/

highlight.js

 

다른 스타일로 바꾸고 싶을 경우

 

다른 스타일을 원하시는 분은 상기 사이트에서 본인 마음에 드는 스타일을 선택합니다. 

아래 화면의 style:rainbow 를 클릭하시면 다른 style 로 변경됩니다.

 

style 을 선택하셨다면 head 태그에 붙였던 소스 중 style 명칭 부분을 본인이 선택한 style 로 변경해 주시면 됩니다.

 

폰트 변경 방법

폰트는 무료 폰트인 구글 폰트를 이용하였습니다.

https://fonts.google.com/

Google Fonts

 

구글 폰트 사이트에 가시면 많은 폰트를 볼 수 있는데요.

 

마음에 드는 폰트를 클릭하시면 상세 페이지로 들어갑니다.

 

+Select this style 을 클릭하시면 우측에 창이 나오는데, 거기서 Embed 를 클릭하시면 Source Code 를 확인할 수 있습니다.

 

	
<!-- Gogle Font for syntax highlight -->
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">

 

폰트의 크기가 너무 커서 저는 추가로 아래와 같이 사이즈도 조절해 주었습니다.

<style>
	pre, code {
		font-family: 'Source Code Pro';
		line-height: 1.5;padding: 0px;font-size: 15px;
			}
</style>

 

티스토리는 네이버 블로그 보다 자유도가 높아서 그만큼 복잡하다고 생각이 될거 같아요

하지만 하나씩 자기의 블로그를 꾸민다고 생각하면 너무 재밌지 않나요?!!!

 

사실, 저도 뭔가 편하게 쉽게쉽게 하고 싶지만 이렇게 하나씩 해가는건 너무 좋네요~~

 

적용되는걸 바로바로 보는 재미도 엄청 좋아요ㅎㅎㅎ