코드블럭 - 줄번호 표시 (라이트 버전)

난 다 필요없고 단순히 줄번호만 표시되면 좋겠다!! 하시는 분들을 위해 준비했습니다.

 

요런 느낌? ㅋ

 

설치법은 풀버전과 동일합니다. 그저 소스가 매우 짧을 뿐

 

<style>
​​/* optional */
​​pre[data-ke-type='codeblock'] {
​​​​white-space: pre-wrap;
​​​​word-break: break-word;
​​}
​​/* required css */
​​pre[data-ke-type='codeblock'] > code {
​​​​position: relative;
​​​​padding-left: 50px;
​​}
​​.ln[data-ln]::before,
​​.ln[data-ln--before]::before {
​​​​content: attr(data-ln);
​​}
​​pre[data-ke-type='codeblock'] > code .ln,
​​pre[data-ke-type='codeblock'] > code .lnBorder {
​​​​box-sizing: border-box;
​​​​position: absolute;
​​​​left: 0;
​​​​display: inline-block;
​​​​width: 40px;
​​​​-webkit-touch-callout: none;
​​​​-webkit-user-select: none;
​​​​-khtml-user-select: none;
​​​​-moz-user-select: none;
​​​​-ms-user-select: none;
​​​​user-select: none;
​​}
​​pre[data-ke-type='codeblock'] > code .lnBorder {
​​​​z-index: 1;
​​​​top: 0;
​​​​bottom: 0;
​​​​width: 40px;
​​​​border: 1px solid transparent;
​​​​border-right-color: #ccc;
​​}
​​pre[data-ke-type='codeblock'] > code .ln {
​​​​z-index: 0;
​​​​padding-right: 10px;
​​​​white-space: nowrap;
​​​​overflow: hidden;
​​​​text-overflow: ellipsis;
​​​​text-align: right;
​​}
</style>
<script>
​​//addon starts
​​window.addEventListener("load", function() {
​​​​var codes = document.querySelectorAll('pre > code');
​​​​for(var i=0; i < codes.length; i++){
​​​​​​var ln = 1;
​​​​​​var code = codes[i];
​​​​​​var color = window.getComputedStyle(code, null).getPropertyValue("color");
​​​​​​code.innerHTML = '<div class="lnBorder" style="border-right-color:'+color+';"></div><span class="ln" style="color:'+color+';" data-ln="'+(ln++)+'"></span>' + code.innerHTML.replace(/\n/g, function(n) {
​​​​​​​​return n + '<span class="ln" style="color:'+color+';" data-ln="'+(ln++)+'"></span>';
​​​​​​});
​​​​​​if (code.lastChild.dataset && code.lastChild.dataset.ln) {
​​​​​​​​code.removeChild(code.lastChild);
​​​​​​}
​​​​​​if (code.lastChild.nodeName == "SPAN") {
​​​​​​​​if (code.lastChild.lastChild.dataset && code.lastChild.lastChild.dataset.ln) {
​​​​​​​​​​code.lastChild.removeChild(code.lastChild.lastChild);
​​​​​​​​}
​​​​​​}
​​​​} //end of forloop
​​});
​​//addon ends
</script>

 

풀버전과의 기능적 차이는, 

• 줄번호 감추기 불가
• 줄강조 불가
• 시작번호 지정 불가
• 긴 코드가 줄바꿈되었을 시, 들여쓰기(indent)가 유지되지 않음
• 선별적 적용 안됨

더 많은 기능은 아래 글 참고

2020/08/25 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 (풀버전)