공부/Just do it
Tistory 코드블럭 커스터마이징 (highlightjs)
Ail_
2022. 1. 7. 20:36
코드 블럭을 설정하려 헤매이다가 결국 성공하여 미래의 날 위해 남겨둔다.
관리 - 스킨편집 - html 편집에서 아래 코드를 <head> 사이에 붙여넣으면 된다.
스킨은 base16/tomorrow-night을 사용 중이다.
<!-- 색상 등의 css파일 -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/base16/tomorrow-night.min.css">
<!-- 하이라이트 적용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<!-- 코드블럭 폰트 종류&크기 변경 -->
<link
href="https://fonts.googleapis.com/css?family=Source Code Pro"
rel="stylesheet"
/>
<style>
code {
padding: 0.25rem;
border-radius: 5px;
font-family: 'Source Code Pro' !important;
font-size: 13.5px !important;
}
pre > code {
margin: 1rem auto;
white-space: pre;
max-width: 1000px;
/* 코드블럭 스크롤 생성 */
overflow: auto !important;
}
</style>
<!-- 라인 넘버 설정 -->
<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 탭에서 table 검색,
.entry-content > table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.9375em;
line-height: 1.5714;
color: #666;
}
.entry-content > table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content > table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}(둘 중에 하나)
.article-view > table {
border: 1px solid #dadce0;
border-collapse: collapse;
}
.article-view > table thead tr {
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: #000;
}
.article-view > table tr th,
.article-view > table tr td {
padding: 7px;
border-left: 1px solid #dadce0;
}
.article-view > table tr {
border-bottom: 1px solid #dadce0;
}table이 들어간 항목들에 table 앞에 > 를 넣어주고 밑에 커스텀 스타일 코드를 붙여넣는다.
/* highlight line 라인 줄 넘버 style 스타일 */
/* 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: #626262;
border-right: 0.2px solid #626262;
vertical-align: bottom;
padding-right: 10px !important;
font-size: 14px;
font-family: Consolas, Monaco, monospace;
width: 30px;
/* your custom style here */
}
/* your custom style here */
.hljs-ln td.hljs-ln-code {
padding-left: 13px;
line-height: 1.5;
}
/* for block of code */
.hljs-ln-code {
vertical-align: center;
padding-left: 10px;
font-size: 15px;
}
코드블럭 주위의 회색 여백은 바로 밑에 있는 .article-view pre를 아래와 같이 수정한다.
(article-view가 아닌 entry-content가 있는 스킨은 수정할 필요가 없는 듯 하다)
.article-view pre {
padding: 10px;
background: rgba(0, 0, 0, 0);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}
참고 링크