03
18
코딩/웹·앱

[jquery] 티스토리 코드 박스 꾸미기 (highlight.js, 라인 넘버, 코드 복사 버튼)

원래는 티스토리 플러그인 "코드 문법 강조"로 만족하려 했다. 근데 막상 코드를 써서 올리고 보니 어딘가 영 허전하기도 했고, 일전에 스킨 적용 시 코드 라인 넘버 생성 플러그인이 작동하지 않는다는 오류 제보도 받아본 바가 있어서 이번 기회에 내 손으로 직접 적용을 해보기로 했다. 코드 복사 버튼은 덤.

 

 

코드 박스를 하이라이트 처리하기 - highlight.js

highlight.js란?

기본적으로 <code>를 통해 웹에 스크립트를 올리면 그 스크립트의 공백은 살아있을지언정 색상까지 붙어서 나오진 않는다. highlight.js는 그런 밋밋한 코드에 색을 입혀서 가독성을 좋게 해주는 javascript 라이브러리다. 현재 191 언어와 97개 스타일을 지원하고, 자동언어 감지, 모든 js 프레임워크와 호환(프레임워크 의존 X), node.js(서버) 작동 등을 지원한다. 사실상 웬만한 언어는 다 작동한다고 보면 된다.

 

 

highlight.js 적용하기

일단 이 링크를 타고 공식 사이트를 가보자. highlightjs.org/download/

 

Getting highlight.js

Hosted A prebuilt version of highlight.js with 39 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig

highlightjs.org

 

그럼 상단에 cdn으로도 받아올 수 있다고 나와있다.

하지만 100개 이상의 언어를 하는 사람이 아닌 이상 cdn을 통해 라이브러리를 통째로 다 받아오는 건 아무래도 비효율적인 편이다.

 

그러므로 우리가 사용할 곳은 Custom package. 스크롤을 조금만 내리면 바로 나온다.

여기서 내가 사용할 언어나, 관심있는 언어 정도만 체크해서 바로 밑에 있는 다운로드 버튼을 누르면

순식간에 이런 묶음의 zip 파일을 다운로드하게 된다.

이제 highlight.pack.js와 원하는 테마의 css파일을 styles 폴더에서 꺼낸 다음
사용 방법 문서에 따라 적용을 시켜주기만 하면 된다. highlightjs.org/usage/

티스토리 식으로 html 코드를 작성해보자면 다음과 같을 것이다.

<link rel="stylesheet" href="./images/<!-- 스타일 시트 이름 -->.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.highlightAll();</script>

 

 

근데 테마 파일이 너무 많다

앞서 말했듯 본 라이브러리는 현재 97개의 스타일을 지원한다. 그리고 위와 같은 방식으로 다운로드하면 그 스타일들을 말 그대로 몽땅 다 보내주는데... 용량은 적다지만 이걸 서버에 전부 다 올릴 순 없는 노릇이다.

그러므로 우리에게 필요한 건 실시간 미리보기.

모든 스타일의 미리보기는 highlightjs.org/static/demo/ 이쪽에서 확인할 수 있다. 취향껏 골라서 넣어보자.

 

highlight.js demo

 

highlightjs.org

 

 

라인 넘버를 넣어주기 - highlightjs-line-numbers.js

※ 주의
플러그인이기 때문에 위에서 최소 한 번 이상 highlight.js의 최신 버전을 임포트 해야 작동한다.

 

highlight.js 라이브러리를 직접 다운로드하여 사용하게 만든 결정적 장본인.

이 플러그인을 사용하기 위해선 highlight.js가 만든 hljs라는 js 객체가 필요한데, 티스토리 내부의 "코드 문법 강조" 플러그인은 이 객체를 지워버려서 본 플러그인 적용이 불가능하다. 분명 이쪽도 클래스 .hljs를 사용하니 highlight.js를 기반으로 제작됐을 텐데 추가 플러그인은 사용하지 못한다는 아이러니...

 

 

highlightjs-line-numbers.js 적용하기

이쪽도 동일하게 공식 홈페이지부터 가보자. github.com/wcoder/highlightjs-line-numbers.js/

 

wcoder/highlightjs-line-numbers.js

Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.

github.com

그럼 몇 가지 다운로드 방식이 나오는데, 일단 CDN으로도 받아올 수 있고

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

직접 다운로드 방식을 통해서 받아올 수도 있다.

취향껏 골라서 다운로드하자.

 

그 후 적용 코드를 html 문서 하단에 넣어주면 된다.
참고로 공식 문서에 나와있는 hljs.initHighlightingOnLoad(); 사용 시, highlight.js에서 오류는 아니지만 구버전의 코드라 사용을 지양해달라는 콘솔 로그가 뜬다.

<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad(); </script>

공식 문서 중반을 보면 css도 적용할 수 있다고 하니 이것도 취향껏 작성해 넣어주자. 웬만하면 넣어주는 게 더 보기 예쁠 것이다.

 

 

코드 복사 버튼을 넣어주기

여기서부턴 비교적 간단하다. 이제 인터넷에 있는 js 코드들을 적당히 긁어와서 코드에 적용시켜주면 된다.

 

CSS

버튼이 pre 태그 속 우측 상단에 떠 있게 하고 싶으므로 position: absolute를 사용한다.
pre[data-ke-type] {
    position: relative;
    overflow: auto;
}

pre[data-ke-type] code {
    overflow: auto;
    border-radius: 6px;
    letter-spacing: 0;
    display: block;
    line-height: 1.3;
}

pre[data-ke-type] button {
    display: inline-block;
    position: absolute;
    top: 1em;
    right: 1em;
}

 

JS (Jquery)

※ 주의
티스토리 플러그인 "저작권자 표시"를 켜 뒀을 경우 copyText()의 document.execCommand('copy')는 사용하지 못한다.
// code.hljs 바로 옆에 버튼 삽입
$(window).ready(function(){
    $("code.hljs").each(function () {
        var code = encodeURI($(this).text().replace(/ +/g, " "));
    	// 코드의 텍스트를 그대로 복사하여 onclick="" 내부의 함수 인자로 전달하면
        // 작은 따옴표, 큰 따옴표가 겹쳐 생성된 html 코드 내부에서 오류가 발생하게 된다.
        // 그래서 encodeURI() decodeURI()를 통해 오류없이 html attr로 들어갈 수 있도록 만들어준다.
        $(this).parent("pre").append('<button onclick="copyText(\'' + code + '\')">복사</button>');
    });
});

// 텍스트를 복사하는 함수
// body 최하단에 사용자가 눈치챌 수 없을 정도로 작은 input을 넣어서 복사 후 바로 삭제한다.
function copyText(txt) {
    $("body").prepend('<input id="myInput" style="width: 1; height: 1;"/>');
    $('#myInput').attr("value", decodeURI(txt)).select();
    var returnValue = document.execCommand('copy');
    $('#myInput').remove();
    if (!returnValue) {
        // throw new Error('복사에 오류가 발생했습니다.');
        prompt("ctrl+C를 눌러 복사하세요.", txt);
    } else
        alert("복사되었습니다.");
}

document.execCommand("Copy"); 커맨드는 브라우저에 따른 호환성 이슈가 있으므로 error를 대비하여 한 번 if문을 넣어준다.

위 코드로 복사가 제대로 되었다면 성공이다.

 

 

(덤) 폰트 지정 CSS

/* 눈누 웹폰트 사용. https://noonnu.cc/font_page/92 */
@font-face {
    font-family: 'D2Coding';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

pre {
    font-family: 'D2Coding', 'Consolas', sans-serif;
    line-height: 1.3;
}

 

 

최종 결과물

블로그는 역시 보기 예뻐야 할 맛이 난다.

 

 

참고

저작자표시 비영리
COMMENT
 

티스토리툴바