티스토리 코드 블럭 입맛대로 바꾸기
티스토리의 새로운 에디터 베타를 시작하고 티스토리 가이드에 코드 블럭에 관한 게시글이 올라왔습니다. 지원하는건 좋지만 기본적으로 지원되는 언어도 몇 없고 라인 넘버 표시가 안됩니다. 그리고 에디터 때문..
plorence.kr
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
내 코드 블록
*** 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;*/
}