코드 블럭 변경하기

 

https://plorence.kr/446

티스토리 코드 블럭 입맛대로 바꾸기

 

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

highlight.js demo

---

내 코드 블록 

 

*** HTML ***

<!-- 코드 하이라이트 -->	
	
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark-reasonable.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
  pre { padding: 0px; }
	
</style>
	
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>

 

 

 

*** CSS *** 

/* 코드 블럭 	*/
/* for block of numbers */
.hljs-ln-numbers {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #666666;
vertical-align: top;
padding-right:5px !important;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
font-family: "D2coding";
font-size: 15px !important; 
padding-left: 10px;
line-height: 1.3;
/*color:white;*/
}