구글 블로그에 "highlight.js" 코드 줄 번호 넣는 방법

• 앞선 글에서는 구글 블로그에 "highlight.js"를 이용해서 코드를 이쁘게 넣는 방법에 대해서 알아봤다. @"구글블로그에 "highlight.js"로 코드 이쁘게 넣는 방법" 
• "highlight.js"에서는 코드별 줄 번호를 표현해주지 않지만, 구글링을 통해 알아낸 줄 번호를 표현하는 방법을 공유하고자 한다.

1. https://github.com/wcoder/highlightjs-line-numbers.js/ <-- 링크를 타고 들어가면 아래와 같은 화면이 나온다.

2. 아래로 스크롤을 하면 아래와 같은 부분이 나타난다.

• 빨간색으로 표시된 부분은 "구글블로그에 "highlight.js"로 코드 이쁘게 넣는 방법" 에서 했던 방법 그대로 </head> 코드를 검색한 후에 그 위에 복사 후 붙여넣기를 한다. 
• 파란색 부분은 CSS 코드인데 넣는 방법을 알면 CSS 부분에 추가하면 된다. 모른다면 3번으로...

3. 위의 파란색 부분은 CSS 코드 부분에 넣어야하는데 매우 간단한 방법이 있다. 

• 먼저 블로그에 "테마" 메뉴로 간 후, "맞춤설정" 버튼을 클릭한다.

• 그리고 왼쪽 아래에 있는 "고급" 탭으로 이동한 후, 위의 파란색 CSS 코드들을 복사 후 왼쪽 "맞춤 CSS 추가"에 붙여 넣어주면 된다. 
• 붙여 넣은 후, 바로 나가면 안되고 가장 우측 상단에 보면 "블로그에 적용" 버튼을 반드시! 눌러야 한다. 

4. 위의 내용을 진행하였다면 기존의 "highlights.js" 사용법에 따라 사용하면 코드에 줄 번호가 생성된다.

• 하지만 디자인이 마음에 들지 않을 수 있는데, 이 때에는 아래에 있는 "CSS selectors"를 참고해서 CSS 부분을 수정하면 된다.

• 이 블로그를 위해 수정한 내용을 "highlights.js"으로 첨부한다.

.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: #fff;
     border-right: 1px solid #CCC;
     vertical-align: middle;
     padding-left: 15px;
     padding-right: 5px;
     font-size: 15px;
     font-weight: bold;
   }

.hljs-ln-code {

     padding-left: 10px;
   }