코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전)

재미삼아 추가하다보니 기능이 덕지덕지!!  ㅋ

오~ 부가 기능들 ㅋ

 

단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요.

아마도 이게 마지막이지 싶으나... (뭐 사실 아직 찾는 사람도 쓰는 사람도 없는 것 같아 부담은 없습니다만. ㅋ)

 

암튼, 제가 사용하고 있는 그대로 공유하는게 맞다 싶어 풀버전 올립니다.

 

기능 목록

• 줄 번호 표시
• 줄 시작번호 지정 가능
• 줄 강조 가능 ([3,5,7-10]과 같은 배열로 표시, 7-10같이 범위도 지정 가능)
• 자동 줄바꿈 (pre-wrap) 적용 시 바뀐줄에도 들여쓰기 (indent) 유지
• 코드상 색상값(예: #FFFFFF, black, rgb(125,125,125) 등)에 어떤 색인지 보여주는 컬러박스 추가
• 괄호({},[],()) 및 태그 (예: <li></li>) 에 마우스 오버시 짝 표시 (클릭시 표시 유지)
  (짝이 없을 경우 빨간색으로 표시됨, 태그는 코드문법강조 플러그인 또는 highlightjs 가 적용되어 있을 때만 작동)
• 코드 복사 시 텍스트로 변환 및 들여쓰기 유지
• pre 별 설정 개별 적용 가능 (아래 표 참고)

 

<pre 태그 에 들어갈 수 있는 data-설정 값들에 대한 설명
(아래 내용 파악 후 필요시에만 개별적으로 html 모드로 변경해 원하는 pre 태그에 속성을 추가합니다. )

 

속성	기능	예시
data-skip	아무 기능도 추가하지 않고 넘어감	<pre data-skip=1
data-noline	줄번호 추가 안하기	<pre data-noline=1
data-hideline	줄번호를 감춘 상태로 시작하기	<pre data-hideline=1
data-start	줄번호 시작번호 지정	<pre data-start=3
data-marker	강조할 줄 지정	<pre data-marker="3,5-9,12" 또는 <pre data-marker="[3,5-9,12]"
data-nopad	들여쓰기 유지 적용 안하기	<pre data-nopad=1
data-nocolor	컬러박스 표시 안하기	<pre data-nocolor=1
data-nomatch	괄호 짝 표시 안하기	<pre data-nomatch=1

#그 외, 코드블럭 - 접기/펼치기도 적용했다면 data-hide=1 도 잘 처리됩니다.

 

설치법

1. 아래 파일 다운로드 후 스킨에 업로드

linenumberV2.js

0.01MB

2. 스킨편집 > html > 하단 </body> 가 끝나기 직전 아래 내용 추가

<script src="./images/linenumberV2.js"></script>

3. 아래 CSS도 스킨의 원하는 곳에 추가

	pre[data-ke-type='codeblock'] {
		white-space: pre-wrap;
		word-break: break-word;
		margin: 0 0 20px 0;
		font-size: 13px;
		line-height: 17px;		
	}
	pre[data-ke-type='codeblock'] > code {
    display: block;
    overflow-x: auto;		
		font-family: consolas, monospace;
	}
  pre[data-ke-type='codeblock'] > code.lnWrap {
    position: relative;
  	padding-left: 40px;
  }

	pre[data-ke-type='codeblock'] > code .ln[data-ln]::before,
  pre[data-ke-type='codeblock'] > code .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;
		cursor: pointer;
  }

  pre[data-ke-type='codeblock'] > code .lnBorder {
		z-index: 1;
		top: 0;
		bottom: 0;
		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;
  }
	pre[data-ke-type='codeblock'] > code .lc {
		box-sizing: border-box;
		display: inline-block;
		width: 100%;
		padding-left: 10px;
	}
	pre[data-ke-type='codeblock'] > code.noline .lc {
		padding-left: 0;
	}
	
	pre[data-ke-type='codeblock'] > code .ln.marker {
		background-color: rgba(40, 70, 100, 1);
		background: linear-gradient(to left, rgba(40, 70, 100, 1) 60%, transparent);	
		color: white !important;
	}
	pre[data-ke-type='codeblock'] > code .lc.marker {
		background-color: rgba(40, 70, 100,1);
		background: linear-gradient(to right, rgba(40, 70, 100, 1) 80%, transparent);
	}

	pre[data-ke-type='codeblock'] > code .lnA { }
	pre[data-ke-type='codeblock'] > code .lnB { }	

	pre[data-ke-type='codeblock'] > code .colBox {
		display: inline-block;
		width: 8px;
		height: 8px;
		vertical-align: middle;
		margin-right: 4px;
		outline: 1px solid grey;
	}

	pre[data-ke-type='codeblock'] > code .hover, pre[data-ke-type='codeblock'] > code .clicked {
		outline: solid 1px gold;
	}
	pre[data-ke-type='codeblock'] > code .solo:hover {
		color: red;
	}

위 CSS와 관련해서...

 

1. pre[data-ke-type='codeblock'] 는 pre 로, pre[data-ke-type='codeblock'] > code 는 pre > code 나 .hljs 로 변경해도 됩니다만 굳이 pre[data-ke-type='codeblock']를 이용한 이유는 코드문법강조 플러그인이나 highlightjs를 사용하지 않아도 잘 작동하도록 하기 위함입니다.
2. pre[data-ke-type='codeblock'] > code .lnA { } 와 pre[data-ke-type='codeblock'] > code .lnB { } 는 홀수줄 짝수줄에 적용할 스타일이 있으면 가능하도록 미리 추가해 둔 내용입니다.

 

참고로 현재 제가 </body>위로 코드 블럭 관련 추가 기능을 적용한 순서는 다음과 같습니다.

 

a. 열기/접기 - 코드블럭 - 접기/펼치기 (+언어명 표시 & 자동 줄바꿈 적용/해제)

b. 자동정렬 - 코드블럭 - 코드 자동 정렬 추가 (+ 탭간격 조정)

c. 줄번호 추가 (본글)

 

이렇게 해두니 깔끔한게 이제 코드블럭 관련해선 더이상 손델게 없을 것 같네요. ^^

 

부가 설명

- 폰트 및 각종 색상들은 css 안에서 해당 부분을 잘 찾으면 왠만해선 다 수정이 가능합니다. 어렵거나 잘 안되는 부분이 있다면 댓글 남겨주세요. 방문 후 친절히 도와 드릴게요. ^^

 

- 티스토리/코드블럭을 주제로 만들어진 내용이지만 css 부분의 pre[data-ke-type='codeblock'] 는 pre 로, pre[data-ke-type='codeblock'] > code 는 pre > code로만 바꿔주면 어디서든 <pre><code></code></pre> 가 코드를 보여주는데 사용되었거나 또는 highlightjs 가 적용된 곳이라면 공통으로 사용할 수 있겠습니다.

 

- 일부 추가 기능 및 스타일은 또다른 문법강조 스크립트인 prismjs을 참고했습니다.
(이것과 관련해선 향후 별도의 포스팅도 올릴 예정입니다.)