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

혹여 SyntaxHighligher (이하 SH) 가 적용되게 써둔 글이 많아서 '코드 문법 강조' 플러그인 (=highlight.js (이하 hljs)) 를 쓰고 싶어도 못쓰는 분들이 계실까 싶어 올립니다.

 

 

[스킨 편집] > [html 편집] > [HTML] 내용 하단 </body> 바로 윗줄에 아래 소스를 넣어 주세요.

(제이쿼리는 추가되어 있을 것으로 간주하겠습니다. 아니면 댓글로 알려 주세요.)

 

$("pre").each(function(i, pre) {
  if (!$(pre).find('code').length) {
    if (pre.className) {
      var c = pre.className.replace(/\s/g, '');
      var nc = {};
      var items = c.split(";");
      $.each(items, function(key, val) {
        if (!val) { return; }
        var v = val.split(":");
        nc[v[0].toLowerCase()] = v[1];
      });
      $(pre).removeAttr('class');
      $(pre).attr('data-marker', nc['highlight']);
      if (nc['gutter'] == "false") {
        $(pre).attr('data-hideline', 1);
      }
      $(pre).wrapInner('<code></code>');
    }
  }
});

 

소스 적용 후, 스킨에서 SH 관련 스크립트 와 js 및 css 는 모두 지워 버리시고

관리 페이지에서 간단히 '코드 문법 강조' 플러그인을 활성화 하시면 됩니다.

 

이후 작성하는 새 글은 그냥 편하게 새 에디터의 코드블럭 삽입 기능으로 쓰시면 되겠습니다.

 

참고로, 줄번호 추가까지 적용하면 이전 SH와 유사하게 사용할 수 있습니다.

2020/08/16 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기

 

기존 글에 있던 소스를 새 에디터의 코드블럭으로 수정해도 문법강조는 잘 적용됩니다만 줄 강조나 줄번호 감추기 같은 추가 설정은 html 모드로 변경 후 수동으로 pre 태그에 data- 로 추가 해주셔야 합니다. (줄번호 표시하기 글 참고)
(다행인건, 한번 수정해두면 그 뒤로는 유지됩니다.)

 

근데 왜 바꿔야 하냐고요?

SH는 너무 오래되었고 유지보수 및 업데이트가 전혀 되지 않고 있습니다.
제이쿼리랑 충돌도 있고 각종 표준과 트렌드에 완전 어긋납니다.
그 외에도 수많은 이유들이 있으니 지금이라도 갈아타시는게 좋습니다.