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

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

 

요런 느낌? ㅋ

 

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

 

<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 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 (풀버전)