-
덕분에 그동안 블로그를 이쁘게 잘 꾸며서 써왔습니다. 최근에 블로그에서 ver 4.x 를 보고 다시 적용해 보았더니 기존 CSS와 hljs 태그 부분이 변경/업데이트 된 것 같습니다. 기존 ver3.x에서는 Code block에 줄번호를 적용하려면 업데이트된 ver4에서는 이런저런 태그들과 #content .content pre code 쪽 항목들을 변경해 보아도 코드블록에 line nubmer는 추가되지 않아서 이렇게 글을 남깁니다. 블로그를 보고 따라하는 정도의 수준이라 번거롭지만 조금 더 설명을 부탁드려도 되겠습니까 line number추가를 위한 github address 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> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
@theangkko 안녕하세요. 이미지 지연 로딩의 추가로 인해 본문 렌더링 방식을 바꿨기 때문에 발생한 문제입니다. 현재 코드 하이라이팅의 경우 브라우저에 렌더링이 되기 전에 하이라이트를 전처리하므로 <script defer src='//cdn.jsdelivr.net/npm/[email protected]/dist/highlightjs-line-numbers.min.js'>
<script>
window.addEventListener('DOMContentLoaded', () => {
Alpine.start()
// 새로 추가 된 코드
hljs.initLineNumbersOnLoad()
})
</script> |
Beta Was this translation helpful? Give feedback.
@theangkko 안녕하세요.
이미지 지연 로딩의 추가로 인해 본문 렌더링 방식을 바꿨기 때문에 발생한 문제입니다. 현재 코드 하이라이팅의 경우 브라우저에 렌더링이 되기 전에 하이라이트를 전처리하므로
initLineNumbersOnLoad()
와 같이 후처리를 하는 형태로는 처리되지 않습니다.body
태그 아래에 다음과 같은 코드로 바꿔보십시오.