코드블럭 + SyntaxHighlighter

 

코드블럭 - SyntaxHighlighter 버리고 highlight.js 로 갈아타기

위 글을 본 후에도 굳이 굳이 계속 계속 SyntaxHighlighter 를 쓰시겠다면....

 

입력하는 방법이라도 편해질 수 있도록 새 에디터의 코드블럭 삽입 기능을 이용할 수 있게 해주는 소스입니다.

 

[스킨 편집] > [html 편집] > [HTML] 내용중 기존 SyntaxHighlighter.all(); 가 실행되기 전 위치에 아래 소스를 넣어 주세요.

(코드블럭삽입 이용시 자동 생성되는 <code> 태그를 SH적용 전에 시원하게 벗겨 드립니다.)

 

var pres = document.querySelectorAll('pre');
for (var i = 0; i < pres.length; i++) {
  var pre = pres[i];
  if (pre.querySelector('code')) {
    pre.innerHTML = pre.innerHTML.replace(/(<code.*>)([^]*)(<\/code>)/gi, '$2');
    if (pre.dataset.sh) {
      pre.className = pre.dataset.sh;
    }
  }
}

 

적용 후 글 쓰실때는 코드블럭으로 소스 입력 후 글 저장 전에 html 모드로 변환하셔서 해당 코드블럭의 pre 태그를 아래와 같이 수정해주시면 됩니다. (이미 SH를 쓰고 계시니 익숙한 부분일 듯..)

 

<pre class="java" data-ke-language="java" data-sh="brush: java; highlight: [3,5]; gutter: true;"><code>public class HelloWorld {
 
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}</code></pre>

 

단! 참고할 점은 기존에 class 에 추가하던 "brush: java; highlight: [3,5]; gutter: true;" 이런 내용을 이제는 data-sh 에 추가한다는 겁니다. class에 넣어도 문제 없지만 이렇게 해야 저 설정들이 추후 소스 수정할 때도 사라지지 않습니다.

 

하지만.. 진짜.. hljs 로 갈아타시길 한번 더 추천합니다.