티스토리 블로그에 소스코드 코드블럭 꾸미기를 위해 html 편집 기능을 이용하는 방법 (소스코드 하이라이트)

• 문서번호: 20201230_1224
• 검색어: nabiro, tistory, code, highlight.js, highlight, source, 티스토리, 코드블록, 코드블럭, 소스코드, 하이라이트, 강조, jbfactory
• 참조 또는 출처: www.jbfactory.net/12748 
• 마지막 업데이트: 

무엇을

티스토리 블로그에서 코드블럭 으로 소스코드 입력할 때 코드 꾸미는 highlight.js 이용하는 방법입니다. 

다른 블로그나 웹페이지에서 적용이 가능하도록 html 편집을 이용하여 설정하는 것을 설명합니다. 

참조사이트

https://highlightjs.org 

https://highlightjs.org/usage 

https://highlightjs.org/download 

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

어떻게

위 참조사이트를 보고 저는 호스트 서비스 url을 이용하기로 하였습니다.
아래의 내용과 같습니다. 

당연히 버전이 올라가면 아래 url의 숫자는 바뀝니다. 
꼭 참조 url 들어가셔서 확인하고 적용하세요. 

<link rel="stylesheet" 
	href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/hybrid.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

https://highlightjs.org/download 페이지를 보면 첫번째 라인은 아래와 같습니다. 

<link rel="stylesheet"
	href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">

저는 default.min.css 스타일 보다는 hybrid 테마가 좋아서 hybrid.min.css 를 선택했습니다. 
여러가지 테마는 https://highlightjs.org/static/demo/ 페이지에서 Themes 부분을 클릭, 참조하시면 됩니다.

아무튼 3줄의 코드를 블로그 관리 > 스킨 편집 > html 편집 순서로 들어가서 해당 코드를 </head> 위부분에 삽입하세요. 

 

그리고 아래와 같이 </head> 위쪽에 코드를 입력합니다. 

위와같이 하시면 나름 나쁘지 않은 모습의 소스 코드를 보실 수 있습니다.