사부작사부작해요
티스토리 코드블록 설정 본문
티스토리 코드 블록의 스타일, 폰트(D2Coding), 라인 넘버 적용하는 방법 정리했다.
라인 넘버 적용 후 코드 스타일이 달라지는게 골치아팠는데, 잘 해결했다.
1. 라이브러리로 스타일 적용
아래 github의 리드미에서, cdnjs 코드를 복사한다.
https://github.com/highlightjs/highlight.js#fetch-via-cdn
GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.
JavaScript syntax highlighter with language auto-detection and zero dependencies. - GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.
github.com
cdnjs부분에서 연결된 link1를 통해 사용할 수 있는 스타일을 복사할 수 있다. default.min.css 대신 사용하고 싶은 스타일을 확인하여 복사한다. 복사한 코드를 HTML에서 <head> 태그에 붙여넣는다.
스타일 데모를 확인하고싶은 경우, 다음의 링크를 참조한다.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
라이브러리 가져온 후 로드하는 것도 잊지말자.
2. 라인 넘버 적용
라인 넘버 역시 라이브러리를 가져와 적용한다. 위에서 작성한 스타일 적용 코드 아래에, 아래 github을 참조하여 CDN으로 라이브러리 가져오는 코드를 복사하여 붙여넣는다.
https://github.com/wcoder/highlightjs-line-numbers.js
GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js
Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.
github.com
이 라이브러리를 가져오고 로드할 때, highlight.js 이후에 가져오고 로드해야 한다. 로드하는 것 역시 해당 github을 참조한다.
3. 다듬기
라인 넘버가 적용되긴 했는데, 중구난방이다.. 코드 블록을 감싸는 회색 상자도 신경쓰인다. 해당 부분의 배경색 부분을 지웠다.
나는 라인 넘버와 코드 사이에 세로 줄 넣고, 라인넘버는 우측정렬, 코드 블록은 조금 둥글게 다듬었다. 그리고 스크롤은 가로방향으로만, 850px이 넘을 경우에만 생기도록 설정했다.
코드 폰트도 눈누2 통해서 D2Coding으로 변경했다.
그리고 라인 넘버 라이브러리만 적용하면 코드에서 폰트 종류, 키워드를 제외한 부분의 폰트 색상이 변경이 되었다. 이부분은 크롬 개발자 도구로 확인했는데, 원인은 라인 넘버 라이브러리를 가져오면서 코드 한줄 한줄이 td 태그로 적용되는 것이 문제였다.
4. 코드
코드를 참고해서 적용하면 더 쉬울 것 같다. 현재 가장 최신 버전과 다를 수 있으니, 최신 버전의 라이브러리를 사용하고 싶다면 github 직접 참고하기!
HTML
<!-- <head> 태그 안에 작성하기 -->
<!-- 스타일 적용 -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/base16/dracula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- 라인 넘버 적용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>CSS
/* UTF-8 선언 아래 작성 */
/* 웹폰트 가져오기 */
@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;
}
/* 코드 블록 스타일 */
.hljs {
white-space: pre;
max-width:850px;
overflow:auto !important; /* scroll setting */
border-radius: 20px;
}
/* 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: right;
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;
}
.hljs-ln td.hljs-ln-code {
padding-left: 15px;
color: #e9e9f4; /* hljs에서 사용하고 있는 기본 폰트 색상으로 변경 */
font-family: 'D2Coding';
}
.hljs-ln-n:before{
margin-right: 15px;
}코드블록 감싸는 상자를 없애고싶은 경우 CSS 수정
/* background와 border를 none에 important로 하여, 따로 설정하지 않게끔 변경했다. */
.area_view pre { color:#555; background: none !important; border: none !important; margin:28px auto; word-wrap: break-word; font-family: Menlo,Consolas,Monaco,monospace; font-size:14px; line-height:20px; overflow-x:auto; }