코드블록에 Line Number를 추가하려면 어떻게 해야 하는지요?

[theangkko]

덕분에 그동안 블로그를 이쁘게 잘 꾸며서 써왔습니다.

최근에 블로그에서 ver 4.x 를 보고 다시 적용해 보았더니 기존 CSS와 hljs 태그 부분이 변경/업데이트 된 것 같습니다.

기존 ver3.x에서는 Code block에 줄번호를 적용하려면
아래 깃헙 js를 불러와서 해당 깃헙에 소개된 방법대로 적용하여 사용하면 되었습니다.

업데이트된 ver4에서는 이런저런 태그들과 #content .content pre code 쪽 항목들을 변경해 보아도 코드블록에 line nubmer는 추가되지 않아서 이렇게 글을 남깁니다. 블로그를 보고 따라하는 정도의 수준이라 번거롭지만 조금 더 설명을 부탁드려도 되겠습니까

line number추가를 위한 github address
https://github.com/wcoder/highlightjs-line-numbers.js

index.html에 아래 항목 추가하려면 아래 script를 적용했었음

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script> <script>hljs.initLineNumbersOnLoad();</script>

[pronist]

@theangkko 안녕하세요.

이미지 지연 로딩의 추가로 인해 본문 렌더링 방식을 바꿨기 때문에 발생한 문제입니다. 현재 코드 하이라이팅의 경우 브라우저에 렌더링이 되기 전에 하이라이트를 전처리하므로 initLineNumbersOnLoad() 와 같이 후처리를 하는 형태로는 처리되지 않습니다. body 태그 아래에 다음과 같은 코드로 바꿔보십시오.

<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'>
<script>
      window.addEventListener('DOMContentLoaded', () => {
        Alpine.start()
        
        // 새로 추가 된 코드
        hljs.initLineNumbersOnLoad()
      })
</script>

[theangkko]

덕분에 잘 변경하였습니다. 감사드립니다!!

---

• 적어주신 답글의 첫줄에 </script> 단어가 빠져있습니다.
• 저처럼 익숙치 않은 분들을 위해서 제가 블로그에 적용한 것을 그대로 적어보았습니다.

//HTML//

<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script> <script> window.addEventListener('DOMContentLoaded', () => { Alpine.start() // 새로 추가 된 코드 hljs.initLineNumbersOnLoad() }) </script>

//CSS//
파일에 문구적용시, 사이트에서 설명하는 문구에 #content 를 붙여야 스타일이 정상적으로 붙습니다.

/* 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;
/ your custom style here */
}

/* for block of code */
#content .hljs-ln-code {
padding-left: 10px;

}

[theangkko]

위 글처럼 설정했더니, 글 본문이 2번 나오는 증상이 있어서 아래처럼 //HTML//을 변경하였습니다.
기존에 " window.addEventListener " >> " window.onload " 로 변경했더니 잘 나옵니다.

*기능은 잘 모르겠지만 (add.EventListener)의 기능설명 홈페이지에서 window. xxxx 으로 하나씩 변경해 봤더니 잘 나와서..^^;

• 목차에서 두 번 뜨는 현상 #188 에 동일 사항에 대한 더 나은 방법이 등록되어 있습니다.

  <script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script> <script> window.onload = function() { // 새로 추가 된 코드 hljs.highlightAll(); hljs.initLineNumbersOnLoad() } </script>