728x90

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

 

우선 기본 스킨은 hELLO임.

https://pronist.tistory.com/5

 

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

hELLO 는 2020년 3월 첫 공개 이후 지금에 이르기까지 티스토리에서 많은 블로거분들께 사랑받은 스킨이 되었습니다. 그 결과 가장 영향력 있는 개발자 커뮤니티인 깃허브에서 약 천 개에 달하는

pronist.tistory.com

 

이용한 code highlighter는 다음임.

https://highlightjs.org/

 

highlight.js

Usage highlight.js can be used in different ways such using CDNs, hosting the bundle yourself, as a Vue plug-in, as ES6 modules, with Node.js, and web workers. See our README on GitHub for more details. As a Module Highlight.js can be used with Node on the

highlightjs.org

 

우선 아래 내용을 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;
}

 

반응형

'Computer > Blog, Markdown, Latex' 카테고리의 다른 글

[Blog] Tistory 의 hELLO 스킨: 글머리기호 글 들여쓰기  (0) 2024.12.16
Tistory에 수식 넣기  (0) 2021.09.07
MARKDOWN 문법  (0) 2021.09.07

티스토리툴바