[블로그] 티스토리 코드 블록 바꾸기
- ETC/블로그
- 2020. 9. 23.
반응형
티스토리 블로그에는 코드블럭이라는 기능이 있습니다. 하지만, 티스토리에서 제공하는 코드블럭이 마음에 들지 않아 직접 Custom 해 봤습니다.
위와 같은 코드블럭 디자인을 Highlight.js를 이용해서 직접 만들어 보겠습니다.
Highlight.js
Highlight.js(https://highlightjs.org/) 는 189개의 프로그래밍 언어와 91가지 스타일을 지원합니다. (version 10.0.3 기준)
sunburst 테마 적용 (HTML)
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/sunburst.min.css">
<script>hljs.initHighlightingOnLoad();</script>모두 소문자로 써서 티스토리 블로그 관리 페이지로 가셔서 좌측메뉴 > 꾸미기 > 스킨편집 을 클릭합니다. 그 후, html 편집을 누른 뒤, <head> ... </head> 사이 어디에나 위의 코드를 붙여넣어주시면 됩니다.
sunburst 부분에 원하는 테마의 영어 이름을 '소문자'로 작성하시면 적용 가능합니다. 테마는 여기의 Styles에서 볼 수 있습니다.
CSS
폰트와 블럭 설정
/* Code block style */
code {
padding: 0.25rem;
background-color: #F1F1F1;
border-radius: 5px;
font-family: "Consolas", "Sans Mono", "Courier", "monospace";
font-size: 0.9rem;
}Scroll 설정
pre > code {
margin: 1rem auto;
white-space: pre;
max-width:850px;
max-height:500px;
overflow:auto !important; /* scroll setting */
}
Line number 설정
HTML
<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
코드 블럭
.hljs-ln {
margin: 0px;
}라인넘버와 코드
/* 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;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 10px;
text-indent: 0.75rem; /* indent added */
}라인넘버 경계선
.hljs-ln-line .hljs-ln-n {
padding-right: 5px;
border-right: 1px solid #CCC;
}
전체 요약
아래의 코드를 블로그 관리 - 스킨 편집 - html 편집에 들어가서 복사 붙여넣기 하면 적용됩니다.
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/sunburst.min.css">
<script>hljs.initHighlightingOnLoad();</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
HTML의 <head> .. </head> 사이에 위의 코드를 복사하시면 됩니다.
CSS
code {
padding: 0.25rem;
background-color: #F1F1F1;
border-radius: 5px;
font-family: "Consolas", "Sans Mono", "Courier", "monospace";
font-size: 0.9rem;
}
pre > code {
margin: 1rem auto;
white-space: pre;
max-width:850px;
max-height:500px;
overflow:auto !important; /* scroll setting */
}
.hljs-ln {
margin: 0px;
}
/* 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;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 10px;
text-indent: 0.75rem; /* indent added */
}
.hljs-ln-line .hljs-ln-n {
padding-right: 5px;
border-right: 1px solid #CCC;
}
CSS 맨 위에 위의 코드를 복사하시면 됩니다.
https://wordbe.tistory.com/entry/Tistory-%EC%BD%94%EB%93%9C%EB%B8%94%EB%A1%9D-%EC%83%9D%EC%84%B1-%ED%85%8C%EB%A7%88-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95
반응형
'ETC > 블로그' 카테고리의 다른 글
| [티스토리] Codepen 코드 티스토리에 올리는 방법 (0) | 2020.10.12 |
|---|---|
| [애드센스] 애드센스 광고 넣는 방법 (0) | 2020.10.06 |
| [애드센스] 광고 위치가 이상할 때 (0) | 2020.10.05 |
| 티스토리 검색엔진 최적화! 구글,네이버 사이트맵 등록! (3분컷) (3) | 2020.08.08 |