티스토리 - 코드블럭 라인넘버 설정

라인넘버 설정 전 후

블로그 관리 > 꾸미기 > 스킨 변경 > html 편집 > HTML

<!-- 코드블럭 라인넘버 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
    hljs.initLineNumbersOnLoad();
</script>
<style>
    pre code.hljs {
            border-radius: 10px;
    }

    .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;
    }

    .hljs-ln td {
        padding-right: 10px!important;
    }

    .hljs-ln-code {
        padding-left: 10px!important;
    }
</style>

 

제작자 GitHub: https://github.com/wcoder/highlightjs-line-numbers.js/

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js