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

코드블럭 3탄!? ㅋ

 

예쁘쥬? 입력할 땐 막했어도 출력은 이쁘게!

 

색상을 입히는 문법강조와는 별개로 코드블럭으로 입력한 소스의 줄맞춤(들여쓰기?)을 예쁘게 정렬해줍니다.

 

이용된 auto indent 라이브러리는 매우 가볍고 다른 알려진 넘들처럼 지멋대로 줄바꿈을 추가하는 등의 오버는 떨지하지 않고 오롯이 들여쓰기 부분만 잘 만져 줍니다. (출처: https://github.com/zebzhao/indent.js)

 

거기에 탭크기 설정을 지원하기 때문에 간혹 너무 크다고 느껴졌던 기존의 탭크기를 줄이는 용도로 쓸 수도 있겠습니다.

 

이미 문법 강조 플러그인을 사용하고 있어도 잘 작동합니다.

(highlight.js 를 직접 추가한 케이스라면 하이라이트 적용 전에만 실행시켜 주면 됩니다.)

 

준비물: 아래 js 파일 다운로드 받아서 스킨에 업로드 해주세요. (유명 CDN 서비스에서는 아직 못찾겠네요.)

indent.min.js

0.01MB

그럼, 파일이 ./images 폴더에 잘 올라갔다고 치고, 

 

적용방법:
[스킨 편집] > [html 편집] > [HTML] 내용 하단 </body> 바로 윗줄에 아래 소스를 넣고 [적용]하면 끝

<script src="./images/indent.min.js"></script>
<script>
// auto-indent (indent.min.js) from https://github.com/zebzhao/indent.js
(function(){
	if (indent) {
		var codes = document.querySelectorAll("pre > code");
		var tab = '    ' ; //탭간격 조정 (1 tab? 2 spaces? 4 spaces?)
		for (var i=0; i < codes.length; i++) {
			var code = codes[i];
			var wrapper = (code.parentNode.tagName == "PRE")? code.parentNode : code;
			if (!wrapper.dataset.noindent) {
				var option = {tabString: (!wrapper.dataset.tab)? tab : wrapper.dataset.tab};            
				var indented = '';
				var codeHTML = code.innerHTML;
				var textArea = document.createElement('textarea');
				textArea.innerHTML = codeHTML;
				var codeText = textArea.textContent;
				var lang = wrapper.classList;
				if (lang.contains("html") || lang.contains("xml")) { 
					indented = indent.html(codeText, option);
				} else if (lang.contains("css")) {
					indented = indent.css(codeText, option);
				} else {
					indented = indent.js(codeText, option);
				}
				textArea.textContent = indented;
				code.innerHTML = textArea.innerHTML;
				textArea = null;
			}
		}
	}
})();
//end of auto-indent
</script>

추가설명:

• 탭간격은 va tab = '    ' 에 탭이건 스페이스건 입맛게 맞게 지정하세요.
• 간혹 코드블럭에 입력한 소스가 완전치 않은 경우(태그나 괄호가 안 닫혔거나.. 몇줄만 보여주는거라거나) 자동 정렬 결과가 마음에 안 들게 나올 수 있습니다.
  
  이럴땐 html 모드로 변경해서 <pre data-noindent="1" 이렇게 data 속성을 추가해주면 처리하지 않고 넘어갑니다.
• 참고로 highlight.js 를 직접 스킨에 추가해 사용중이고 탭간격을 highlight.js 의 configure 를 통해 설정했다면 나중에 실행되는 highlight.js 의 탭크기 설정이 우선시 됩니다.
• 코드 개별적으로 탭간격을 다르게 지정하고 싶다면 <pre data-tab="  " 이렇게 별도 지정이 가능합니다.