플러그인에 있는 테마만 썼는데 가독성도 떨어지고 멋도 안나서 이리저리 검색해보고
나중에 또 변경할 때를 대비해 정리해 놓는 글!
1) 스킨 편집 => html편집 => <head>태그 안에 코드삽입
<link rel="stylesheet" href="./style.css" /> // 아래에
// 이 코드 삽입
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.
js/9.15.6/styles/school-book.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js">
</script> <script>hljs.initHighlightingOnLoad();</script>
2) 하이라이트에 테마를 고른다!
옥스포드 공책 테마이름 : School Book (넘버라인 옵션 적용불가)
테마 이름은 다 소문자 공백(띄어쓰기)는 '-' 로 표기
highlight.js demo
highlightjs.org
3) 선택한 테마를 school-book이 있는 자리에 넣는다
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax
/libs/highlight.js/9.15.10/styles/school-book.min.css">
+
추가로 코드블럭 바깥 테두리 제거 css에서 code.hljs 나 "article-view pre"의 padding값을 줄여준다
만약, 위의 클라스가 없다면 아래의 내용 css에 추가
.article-view pre 또는 .hljs {
padding: 20px; // 10정도로 줄이면 없어짐
background: rgba(0, 0, 0, 0.03);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}
넘버라인
<head> - </head> 안에 넣는다!
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</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;
text-indent: 0.75rem; /* indent added */
}
👇
/* 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: left;
color: #ccc;
/* border-right: 1px solid #CCC; */
vertical-align: top;
padding-right: 5px;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
text-align: left;
padding-left: 10px;
}
[티스토리] 코드블럭 생성, 테마, 라인넘버 끝내기
Code Block 티스토리에서 코드 블록을 생성하는 방법과 적당히 예쁘게 꾸미는 방법을 알아봅니다. 코드블록(Code block) 생성 1) 티스토리 에디터 > 더보기버튼 > 코드블럭 으로 생성하는 방법 2) 마크
wordbe.tistory.com
댓글