플로렌스라는 개발자

티스토리 코드 블럭 입맛대로 바꾸기

기타 강좌 2019.04.01 댓글 21 Plorence

목차

    티스토리의 새로운 에디터 베타를 시작하고 티스토리 가이드에 코드 블록에 관한 게시글이 올라왔습니다.

    지원하는 건 좋지만 기본적으로 지원되는 언어도 몇 없고 라인 넘버 표시가 안됩니다.

    그리고 에디터 때문인지 colorscripter.com에서 복사한 코드가 개판으로 만들어진다는 것..

     

    어느순간 플러그인으로 지원하기 시작했습니다.

    이게 귀찮으신 분들은 블로그 관리에서 플러그인 사용해서 쓰세요.

    티스토리 문법 강조 플러그인

     

    코드 하이라이트 적용 - Highlight.js

    highlight.js download 페이지

    Highlight.js에 들어가서 코드 하이라이트가 필요한 언어만 체크하고 다운로드합니다.

    그다음은 style을 지정해야 하는데 예시는 데모 사이트가 있습니다.

    다운로드하고 블로그 설정 -> 스킨 변경 -> 스킨 편집 -> html 편집 -> 파일 업로드에서

    highlight.pack.js와 자신이 선택한 style을 업로드합니다.

    그다음 HTML 편집에 들어가서 <head> 태그 내에

    <!-- 코드 하이라이트 -->
    <script src="./images/highlight.pack.js"></script>
    <link rel="stylesheet" href="./images/vs2015.css">
    <script>hljs.initHighlightingOnLoad();</script>

    라고 써주고 vs2015 부분만 선택한 style이름으로 바꾸면 됩니다.

    라인 넘버 적용 - highlightjs-line-numbers.js

    highlightjs-line-numbers.js Github에 들어가서 다운로드하고 src폴더 내에 있는 highlightjs-line-numbers.js를 업로드합니다.

    그다음 HTML 편집 들어가서

    <!-- 코드 블럭 라인 넘버 표시 -->
    <script src="./images/highlightjs-line-numbers.min.js"></script>
    <script>hljs.initLineNumbersOnLoad({
        singleLine: true
    });
     </script>

    위 코드를 적용합니다.

    다운로드가 귀찮으신 분들은 아래의 코드를 추가하시면 됩니다.

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

    그리고 CSS 편집 탭에 들어가서

    /* for block of numbers */
    .hljs-ln-numbers {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    
        text-align: center;
        color: #ccc;
        border-right: 1px solid #CCC;
        vertical-align: top;
        padding-right: 5px;
    
        /* your custom style here */
    }
    
    /* for block of code */
    .hljs-ln-code {
        padding-left: 10px;
    }

    해당 코드를 적용합니다.

    근데 저는 맘에 안 드는 부분도 있고 잘 안되길래 조금 바꿨습니다.

    /* for block of numbers */
    .hljs-ln-numbers {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    
        color: #666666;
        vertical-align: top;
        padding-right:5px !important;
        /* your custom style here */
    }
    
    /* for block of code */
    .hljs-ln-code {
    	font-family: "D2coding";
        padding-left: 10px !important;
    	/* 적용되지 않는 문제로 !important */
    	color:white;
    }
    pre > code{
    	font-family: "D2coding" !important;
    	/* 적용되지 않는 문제로 !important
    	그리고 line number에도 폰트를 적용하기 위해*/
    }

    이 코드가 제가 수정한 코드입니다.

    실제 코드 블록 적용 예시는 다른 게시글에 있습니다.

     

    2019-11-13에 수정되었습니다.

    댓글

    21

    말씀하신대로 따라적용하였는데
    모든 부분이 정상적이나 매 라인에 표처럼 표시가 됩니다.

    2019.06.19 20:38 신고

    혹시 해결하셨나요?

    2019.10.18 17:33 신고

    Plorence님이 친절하게 개인 메신저로 알려주셔서 해결했습니다.

    2019.10.21 16:31 신고

    저도 위에 댓달아주신 분이랑 똑같네요... 표처럼 표시되거나 안되거나 ㅠ0ㅠ.. 문제가뭘까유.. 다 뒤져봐도 안나와요

    2019.10.18 17:32 신고

    블로그에 댓글남겨드렸습니다.
    확인 부탁드립니다.

    2019.10.18 20:08 신고

    감사합니다~!

    2019.10.19 14:07 신고

    안녕하세요, 저도 댓글다신 위 두분처럼 테이블 형태로만 나옵니다.. 도움 주실 수 있나요??

    2019.11.13 17:02 신고

    해당 게시글에 댓글달아드렸습니다.
    확인해주시면 감사하겠습니다.

    2019.11.13 21:16 신고

    감사합니다!! 말씀해주신대로 css 수정했더니 바로 해결했네요.
    굳이 html 에서 tb 태그관련 수정 할 필요없이 css 에 속성만 넣어두면 되겠죠?

    2019.11.13 21:47 신고

    네 그렇게 하시면 됩니다.

    2019.11.14 12:41 신고

    비밀댓글입니다

    2019.11.21 10:55

    비밀댓글입니다

    2019.11.21 11:19

    https://stackoverflow.com/questions/47398550/uncaught-syntaxerror-unexpected-token-line-one-js

    이 문제 같습니다.

    2019.11.21 11:54 신고

    안녕하세요. 말씀하신대로 따라했는데 표처럼 적용되는 현상이 있습니다. 가능하시다면 도움 부탁드립니다.

    2019.12.20 00:41 신고

    우선 늦게 댓글달아드려 죄송합니다.
    확인해봤는데, 잘 표시되는 것 같습니다.
    그사이에 고치셨나보네요. 대단하십니다.

    2019.12.22 22:00 신고

    Highlight.js가 표로 나타나 것을 고치지 못해서 Google Code Prettify를 적용시켜서 해결했습니다. 도움 감사드립니다.

    2019.12.23 14:14 신고

    저도 마찬가지로 표로 표시가 되는데, 도움을 주실 수 있으실까요?
    여러가지 js로 시도를 해봤지만 모두 표로 표시가 되었습니다...

    2020.02.03 19:56 신고

    https://snupi.tistory.com/30
    해당 게시글을 봤는데, 코드는 잘 나옵니다.
    뭐가 문제인건가요?

    2020.02.03 19:58 신고

    라인넘버 표시시에 테이블 형식으로 표시가 되었었는데, CSS에서 해결을 하였습니다 신경써주셔서 감사합니다!

    2020.02.04 08:35 신고

    안녕하세요 플로렌스님! 덕분에 하이라이트를 이쁘게 입힐 수 있게 되었습니다. 다만, 라인 표시를 적용하니 다른 댓글에서 나타난 현상과 마찬가지로 표 테두리가 생기는 문제가 발생했습니다.ㅠㅠ CSS를 겉핥기로 해서 아주 쪼끔 알아서 강제로 표 테두리는 없앴는데, 표 내의 라인 간 패딩이 너무 크고 코드블럭 자체의 패딩도 너무 커서 뭔가 이상해보입니다. 어떻게 손을 대야할지 모르겠는데 혹시 도움을 청할 수 있을까요?ㅠㅠ

    2020.02.15 18:36 신고

    문제는 이렇습니다.
    pre태그내에 자식 태그를 쭉 따라가다 보면 td태그가 나오는데, 이 태그에 적용된 속성때문에 그렇습니다.
    .article_view table tr th, .article_view table tr td
    이거 때문에 그런건데 padding: 7px속성이 있네요.
    td[class^="hljs-ln-line"]{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    }
    td[class$="hljs-ln-code"]{
    padding-right: 0px !important;
    }
    td[class$="hljs-ln-numbers"]{
    padding-left: 0px !important;
    }
    위 CSS들만 하셔도 될 것 같습니다.
    만약 코드바깥쪽 공백이 너무 심하신 것 같다면
    code[class^="hljs"]{
    padding: Npx;
    }
    N은 정수고 원하시는 대로 조절하시면 됩니다.
    제생각엔 0이 제일 나은 것 같네요.

    2020.02.15 21:06 신고