CodeMirror 이용한 코드 문법 강조(Code Syntax Highlight)

CodeMirror 이용해서 블로그 글 쓸때 문법 강조하도록 바꾸었다.

글 쓸 때에는 다음과 같이 HTML 모드에서 pre태그 이용해서 클래스 명을 code-[언어] 로 해주면 됨.

<pre class="code-javascript">
  (코드)
</pre>

CodeMirror.css파일의 경우는 CodeMirror랑 CodeMirror-scroll 클래스의 스타일 설정을 다음과 같이 한다.

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

HTML의 헤더에 CodeMirror.js파일이랑 관련 스타일시트를 넣어준 다음에 jQuery를 이용해서 다음 코드를 티스토리 글이 로드된 후에 실행되도록 삽입하였다.

  // code syntax highlight
  var codeFrag=jQuery('pre[class!="code"]');
  codeFrag.each(function(i){
    var q=jQuery(this);
    var codeText=q.text();
    q.text('');
    var lang=q.attr('class').split('-')[1];        
    var config={value:codeText,
                mode:lang.trim(),
                tabSize:2,                
                smartIndent:true,
                lineNumbers:true,
                viewportMargin: Infinity,
                readOnly:false,
                theme:'xq-dark',
                lineWrapping:true,                
                extraKeys:{
                  Tab:function(cm){
                    if(cm.getSelection().length){
                      CodeMirror.commands.indentMore(cm);
                    } else{
                      cm.replaceSelection('  ', 'end');                      
                    }
                  },
                  'Shift-Tab':function(cm){
                    CodeMirror.commands.indentLess(cm);
                  }}        
      };    
    CodeMirror(this,config);    
  });

일부러 에디팅 가능하게 해두었음. 그리고 indent 사이즈는 2로 하고 탭 문자를 space 두개로 바꿈. Shift-Tab키도 먹도록 함. 

자동 크기조절을 위해 viewportMargin:Infinity 설정이 중요함.

간단하게 가능하네ㅎ