Syntax Highlight 플러그인이 마음에 들지 않을 땐,
highlight.js를 활용하면 좋다.
티스토리 블로그에서 코드블럭을 다른 사람들 처럼 깔끔하게 넣자.
왜 꼭 다른 사람들은 깔~끔한데, 나만 한 5% 부족해보일까?
.... 에서 시작한 작업을 다음에 다시 적용해야 할 일이 있을지 몰라 기록해 두기로 하였다.
1. [티스토리] 코드블럭 사용방법
내가 생각하는 티스토리에서 깔끔하게 코드블럭을 사용하는 방법은 3가지 정도 있다. 2번과 3번은 모두 괜찮은 방법이지만, 여기에는 3번에 대해 기록해 두기로한다. (2번은 가입해서 쓰기만 하면 된다. 언제든.)
| 방법 | 장점 | 단점 |
| 1. 티스토리 제공 플러그인 (코드 문법 강조, Syntax Highlight) |
간편하다 | 디자인 수정 난감 8개 정도의 테마 만 제공 |
| 2. 외부에서 만들어서 삽입하기 (Github Gist 등) |
품질 일정(높은 수준) 소스관리 편함 |
디자인 제한적 |
| 3. 티스토리 스킨 편집 (highlight.js) |
깔끔 | 초기세팅 귀찮... |
2. highlight.js 적용하기
200. Syntax Highlight 플러그인 해제하기
★ 주의사항 만약 플러그인(Syntax Highlight)을 사용하고 있었다면, 반드시 해. 제. 하자!!
210. 테마 고르기
아래 사이트로 가서 원하는 테마를 고르자. 난 Github Dark Dimmed 를 골랐다.
★ 주의사항 테마이름은 꼭 기록해 두어야 한다. 단, 띄워쓰기는 하이픈(-)으로 대문자는 구별하지 않음
예) Github Dark Dimmed 는 github-dark-dimmed 가 실제로 사용될 이름
https://highlightjs.org/static/demo/
220. 티스토리 헤더에 스크립트 삽입
스킨편집 - html편집 - HTML 에서 <head>와 </head> 사이에 스크립트를 삽입하자.
[시간 남는 사람을 위한 참고] 위 사이트(https://highlightjs.org/)로 들어가도 CDN을 사용한 사용법이 있으니 참고하기 바란다. 호환성 관리를 위해 js 파일을 티스토리에 업로드하려는 사람은 별다른 설명이 없어도 알아서 하리라 믿는다.
221. 사용할 스크립트 로딩
아래 스크립트만 넣으면, 티스토리 제공 플러그인(코드강조)을 사용하는 수준이 완성된다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>"default"가 테마 이름이다. 위에서 찾은 테마가 있다면 그 이름으로 바꾸어주자.
내 경우엔, default.min.css 대신 github-dark-dimmed.min.css 로 바꾸어 주었다.
줄번호(line number)가 들어가지 않는다는 단점이 있다. js 파일을 추가하자. 줄 번호가 필요없는 사람은 쓰지 않아도 좋다.
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
222. 실행 스크립트 넣기
이제 코드강조 구문의 실행과 줄번호 삽입의 실행을 위한 스크립트는 아래와 같다.
<!-- 구문강조 시작하기 -->
<script>hljs.initHighlightingOnLoad();</script>
<!-- 줄번호 추가하기 -->
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>
223. 전체 코드
내가 쓰고 있는 것을 그대로 복사해 두었다.
<!--Syntax Highlighter-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github-dark-dimmed.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>
230. 티스토리 css에 코드블럭 꾸밈용 넣기
스킨편집 - html편집 - CSS 에서 아무데나 스크립트를 삽입하자.
내가 잘 알지도 못 하는 CSS를 설명하기도 어렵고, 정작 나도 블로그를 찾다가 줏어온 것이라 설명은 생략~
그렇지만, 5%의 깔끔함을 원한다면 여기가 핵심이다!! 참고로, code, pre는 html tag이며, hljs-ln-numbers 와 같은 것은 헤더에 넣은 js 파일에서 규정하고 있는 모듈로 보여진다.
/* Code block style */
code {
padding: 0.25rem;
background-color: #F1F1F1;
border-radius: 5px;
font-family: "Consolas", "Sans Mono", "Courier", "monospace";
font-size: 0.75rem;
}
pre > code {
margin: 1rem auto;
white-space: pre;
max-width:850px;
max-height:500px;
overflow:auto !important; /* scroll setting */
}
/* 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: 12px;
text-indent: 0.75rem; /* indent added */
}
3. 오류 해소하기
여기까지 따라하고 나면, 희안하게도 테이블의 셀 테두리가 생긴다거나 가운데 정렬이 된다거나 하는 경우가 있다.
구문강조 자바스크립트에서 사용하는 table과 티스토리 내 table의 CSS가 강제로 참조되는 문제라고 한다.
스킨편집 - html편집 - CSS 에서 글 본문의 테이블을 설정하는 부분을 찾아 바꿔주자. 내 경우에는 .entry-content 의 table이 문제였고, ">"를 추가해서 오류가 없어졌다.
끝~
'리빙포인트' 카테고리의 다른 글
| 라즈베리파이 + OMV 6, desktop environment error (1) | 2024.02.15 |
|---|---|
| (Tips) PyROOT install in windows10 (for ROOT v6.26.00) (0) | 2022.03.28 |
| [python] SyntaxError: Non-UTF-8 code starting with '\xbe' (0) | 2022.03.21 |
| [주식투자] 한경 컨센서스에 없는 증권사리포트 읽기 (0) | 2022.02.23 |
| [라즈베리파이] SFTP로 외부에서 접속하기 (0) | 2022.02.05 |
댓글