Tistory: 설정 202501

code block의 라인넘버 등이 좀 보기 불편해서 약간 수정을 가함:

 

우선 기본 스킨은 hELLO임.

https://pronist.tistory.com/5

hELLO 티스토리 스킨을 소개합니다.

 

이용한 code highlighter는 다음임.

https://highlightjs.org/

highlight.js

 

우선 아래 내용을 head 의 아래부분에 추가: </head> 위에 놓으면 됨.

<!-- dsaint31 -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            outlineMath: [["$$","$$"], ["\\[","\\]" ] ],
            processEscapes: true
        }
    });
</script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>


<!-- code block highlighting and linenumber -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script>
<script>
      window.addEventListener('load', () => {
          hljs.highlightAll();
          hljs.initLineNumbersOnLoad()
      })
</script>

 

이후 css파일의 맨 마지막에 다음을 추가.

/* ----------------------------- */
/* for block of numbers.         */
#content .hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;
}
 
/* for block of code */
#content .hljs-ln-code {
    padding-left: 10px;
}

---