티스토리 코드블럭 꾸미기(디자인, 라인넘버 표시, 글씨크기조절)

티스토리 코드블럭 꾸미는법

 

https://highlightjs.org/

highlight.js

 

사이트에 많은 스킨과 언어 예제가있으니 확인해서 하단 소스명만 바꿔주면 된다.

 

블로그관리 -> 스킨 편집 -> HTML 

부분 head안쪽에 넣는다

 

<!-- 코드 블럭 디자인 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/monokai-sublime.min.css">

// 위에 monokai-sublime.min.css 이부분 변경하면 디자인 변경됨

<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
	$(document).ready(function() {
		$('code.hljs').each(function(i, block) {
		hljs.lineNumbersBlock(block);
		});
	});
</script>
	
<!-- 코드블럭 글씨 크기 -->
<style>
pre > code {
	font-size: 14px;
}
</style>

그러면 이렇게 이쁘게나온다