2019년 4월 티스토리에 새로운 에디터가 적용이 되었고
기존에 코드를 입력하기 위해서 SyntaxHighligher를 적용해야 했으나
코드 블록을 사용하면 훨씬 편하고 간편하게 적용할 수 있다.
그러나 초심자에게는 파일이 너무 복잡해서 간단하게 적용할 수 있는 방법을 포스팅하고자 한다.
1. Highlight.js 를 적용하기 위해 일단 데모에서 원하는 스타일을 찾는다.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
2. 다운로드 사이트로 가게 되면 Package를 다운로드한다. 다운로드한 파일은 다음과 같다.
https://highlightjs.org/download/
3. 압축을 풀면 다음과 같이 파일과 폴더가 생성된다.
이중에서 필요한 파일은 highlight.pack.js이다.
추출한 파일은 다음과 같다.
4. \highlight\styles 폴더에 들어가면 모든 스타일의 CSS 파일이 있는데 티스토리에 다 업로드할 필요는 없다. 필요하거나 데모에서 본 것 중 마음에 드는 것 하나만 업로드하면 됨!
이들 중에서 나는 쓰는 것이 hybrid.css 파일임. 이것도 따로 첨부
5. 코드에 색깔을 입히는 CSS 말고 코드 줄을 붙이는 CSS도 필요한데 따로 추출한 파일은 다음과 같다.
highlightjs-line-numbers.min.js
0.00MB
https://github.com/wcoder/highlightjs-line-numbers.js
wcoder/highlightjs-line-numbers.js
Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.
github.com
여기서 다운로드한 수도 있다.
6. 여기까지 다운로드하게 되면 파일 3개가 준비된다. 따로 모아두면
highlight.pack.js
0.05MB
highlightjs-line-numbers.min.js
0.00MB
hybrid.css
0.00MB
7. 티스토리의 스킨 편집 - HTML 편집으로 가서 3개의 파일을 업로드한다.
8. <Head> </Head> 사이에 코드 하이라이트와 코드 블록 라인 넘버 표시 스크립트를 다음과 같이 입력해 준다.
<!-- 코드 하이라이트 -->
<script src="./images/highlight.pack.js"></script>
<link rel="stylesheet" href="./images/hybrid.css">
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {hljs.lineNumbersBlock(block);});
});
</script>
9. CSS 편집에서 다음 코드를 입력해 준다.
/* for block of numbers */
.hljs-ln-numbers {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;color: #666666;vertical-align: top;padding-right:5px !important;/* your custom style here */}
/* for block of code */
.hljs-ln-code {font-family: "consolas";padding-left: 10px;/*color:white;*/}
10. 이렇게 적용되고 나면 티스토리 에디터의 코드 블록을 사용하면 자연스럽게 코드가 입력된다.
11. C 코드를 입력한 화면.
'Computer Tip's > Web' 카테고리의 다른 글
| [2020년 12월] 새로 시작하는 애드센스 광고달기-티스토리 #1 (0) | 2020.12.12 |
|---|---|
| 티스토리 앱 개편 소식~ (0) | 2019.12.05 |
| 티스토리용 stlucius_skin ver1.0 (0) | 2019.03.03 |
| 티스토리(Tistory) 스킨(Skin) 제작기 - 사이드바 세팅값 (0) | 2019.02.25 |
| 화면 실제 크기 Pixel 나타내는 스크립트 width * height (0) | 2019.02.24 |