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

흠.. 쓸수록 코드블럭에 자꾸 관심이 가네여...왜지...(?)

 

코드블럭 공지에 올라온 댓글을 보고 오호 있으면 좋겠는데!? .. 해서 만들어 보았습니다.

 

뭔가 버튼이 노출되어야 하는김에 코드의 언어 명을 표시했고, 보너스로 줄바꿈 적용/해제 체크박스도 넣었습니다.

 

예시는 대략 이렇습니다.

 

var wrapper = (code.parentNode.tagName == "PRE")? code.parentNode : code;
if (!wrapper.dataset.noindent) {
	//long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long.
}

 

준비물: 스킨에 jQuery가 적용되어 있어야 합니다.
(이번엔 매우 귀찮아서 제이쿼리 썼습니다.... 보니까 스킨에 대부분 적용되어 있는듯..)

 

적용방법:
[스킨 편집] > [html 편집] > [HTML] 내용 하단 </body> 바로 윗줄에 아래 소스를 넣고 [적용]하면 끝
(혹시 제 코드 자동 정렬을 사용하고 있다면 그 소스보다는 위쪽으로...)

2020/08/19 - [웹 코딩/티스토리] - 코드블럭 - 코드 자동 정렬 추가 (+ 탭간격 조정)

<style>
	.codeLabel {
		position: relative;
		margin: 10px 0 0;
	}
	.codeLabel * {
		user-select: none;
		cursor: pointer;
		font-size: 13px;				
	}
	.codeLabel > div {
		display: inline-block;
    color: #ccc;
    text-transform: uppercase;		
		background-color: #282c34;
		padding: 6px 10px;		
	}
	.codeLabel span {
    color: #555;
		margin: 0 0 0 10px;		
	}
	.codeLabel span ~ label {
		position: absolute;
		right: 0;
		top: 6px;
	}
	.codeLabel span ~ label input {
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
	}
</style>
<script>
$("pre[data-ke-type='codeblock']").each(function() {
	var showTxt = "열기", hideTxt = "닫기", pre = this;
	var code = this.dataset.keLanguage;
	var $labelDiv = $("<div>");
	var $labelBtn = $("<span>");
	var $wrapBtn = $("<label><input type='checkbox' checked='checked'> 줄바꿈</label>");
	var $code = $(this).find("code").first();
	var codeHtml = $code.html();
	if (codeHtml.search('&lt;hide/&gt;\n') > -1 || pre.dataset.hide) {
		$code.html(codeHtml.replace('&lt;hide/&gt;\n',''));
		$labelBtn.text(showTxt);
		$wrapBtn.hide();
		$(this).hide();
		$(this).attr('data-hide', 1);
	} else {
		$labelBtn.text(hideTxt);
		$(this).show(); //줄번호 표시를 사용하고 있다면 이 줄은 주석 처리
	}
	$labelBtn.on("click", function() {
		var txt = $(this).text();
		$(this).text((txt==showTxt)?hideTxt:showTxt);
		if (txt==showTxt) {
			$wrapBtn.show();
			$(pre).removeAttr('data-hide');
		} else {
			$wrapBtn.hide();
		}
		$(pre).toggle();
	});
	$labelDiv.on("click", function() {
		$labelBtn.triggerHandler("click");
	});
	$wrapBtn.find("input").first().on("click", function() {
		$(pre).css({'white-space': (this.checked)?'pre-wrap':'pre', 'word-wrap': (this.checked)?'break-word':'normal'});
		if (typeof setLnHeight === 'function') {
			setLnHeight(pre);
		}
	});
	$labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);
	var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn).append($wrapBtn);
	$(this).before($codeLabel);
});
$(window).on("load", function() {
	if ($('code').length) {
		var col = window.getComputedStyle($('code').first()[0], null).getPropertyValue("color");
		var bgc = window.getComputedStyle($('code').first()[0], null).getPropertyValue("background-color");
		$('.codeLabel div').css({'color': col, 'background-color': bgc});
  }
});
</script>

 

사용법:

• pre 태그에 자동 줄바꿈 스타일은 이미 적용되어 있을 것으로 가정하고 짰습니다.
  만일 아니라면 소스에서 input 태그의 checked 부분을 지워주시거나 이참에 줄바꿈을 스킨에 적용합니다.
  스킨의 css 에서 pre 를 찾아 { white-space: pre-wrap; word-break: break-word; } 추가합니다.
• 이미 접힌 상태로 나오길 바란다면 코드블럭에 소스 입력시 제일 첫줄에 <hide/> 라고 넣고 그 다음줄부터 내용을 넣으심 됩니다.
  (또한, 페이지 로딩될때 아예 안보이게 스킨의 css 에서 pre 를 찾아 { display: none; } 을 추가해주시길 추천합니다.)

첫줄 보이시죠?

 

• 왠지 이 방법이 싫으시면... 글작성 시 html 모드로 가서 해당 코드블럭의 <pre> 태그에 <pre data-hide=1> 을 추가해줘도 동일하게 됩니다.
• 언어명의 배경색과 글자색은 테마에 맞춰 조정됩니다. (싫으시면 소스 끝부분에 $(window).on( ... ) 다 지워버리시고 .codelabel 의 스타일에 있는 내용을 수정해주심 되겠죠?)