티스토리 포스팅에 소스코드를 '이쁘게' 집어넣는게 예전부터 항상 골칫거리였다. 그래서 그냥 다른 개발자들 처럼 차라리 github.io에 마크다운으로 포스팅 할까 생각했었는데 그건 또 그거대로 귀찮고. 그래서 예전엔
syntaxhighlighter를 붙여서 썼었는데, 한번 설정할 때 마다 수십개의 파일을 업로드 하고, 메인 html에서 링크 걸어두고 하는게 귀찮아서 그냥 아예 아무것도 없이 방치해두고 있었다.
그렇게 내버려두고 있다가 어쩌다 한번 생각나서 검색해보니 hightlight.js란 놈으로 소스코드 하이라이팅을 할 수 있대서 한번 알아보니 신택스 하이라이터보다 내 맘에 더 드는 몇가지 특징들이 있었는데,
- 파일 갯수가 적다.
그냥 신택스 하이라이터는 기본적인 코어 js만 업로드 하는데 수십개의 파일을 올려야 했고, 그게 또 티스토리 관리자 페이지에서 보기 힘들게 정렬도 안 되어 있어서 관리하기가 매우 귀찮았었는데, 그냥 하이라이트.js는 이 블로그에 딱 두가지 파일만 올리는걸로 끝냈다. - 이쁘다
사실 더 찾아보면 신택스 하이라이터에도 이쁜 스킨이 많을텐데 그냥 바로 구글링 했을때 안 나오기도 했고, 하이라이트.js는 내가 원하던 gist 테마 css가 바로 있어서 고대로 가져다가 link걸어주는걸로 세팅이 끝났다. - 딱히 다른 기능이 필요하진 않다
github에서 보는것 마냥 라인 넘버 나오고, 버튼 하나로 복사 가능하고, raw view로도 보여줄 수 있으면 더 좋기야 하겠지만 딱히 그게 필요하진 않았다. 그냥 마크다운 문서 중간 중간에 코드 스니펫 들어가 있는 정도만 보여줘도 괜찮으니까.
이런 의미에서 hightlight.js를 써보기로 했다.
설치
1. highlight.js 공식 홈페이지에서 js, css를 다운받고
2. 티스토리 '스킨편집 > 파일 업로드' 에서 그 파일들을 올려준 다음
(여기서 내가 올린 파일은 맨 아래 두 css, js 파일들이 전부)
참고로 여기서 모든 css파일을 올릴 필요는 없다. 본인이 원하는 테마의 css 만(내 경우에는 gist만) 올려도 충분하다.
3. html에서 js, css링크만 걸어주면 된다.
우선, <head> 에서는 아래처럼 css링크를 걸어주고,
<link rel="stylesheet" href="./images/github-gist.css">
<body> 안에서는 js링크를 걸어준 다음 최초 init만 해 주면 끝.
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>아니면 애초에 링크를 CDN으로 걸어줘도 되고. 마음대로.
그래서
아무튼 문법 강조하고 싶은 코드를 <pre><code> code </pre></code> 사이에 끼워 넣으면 아래처럼 하이라이팅이 된다. 오예!
class Asdf extends BaseAsdf {
public static final string asdf = "asdf";
asdfsad < asdfasdf;
// comment
// 한글주석
}내가 쓰는 하루패드 마크다운 툴에선 코드 스니펫을 html로 export하면 그 부분을 <pre><code> 태그로 묶어준다. 이렇게 세팅하면 마크다운 에디터에서 글 쓰고 html만 뽑아서 블로그에 포스팅 하는것도 가능할듯.
'잡글' 카테고리의 다른 글
| 밀스 3.0 체험팩 후기 (0) | 2017.08.09 |
|---|---|
| 베어본 컴퓨터로 홈 서버를 바꿨다 (0) | 2017.05.15 |
| 이번달의 지름 - 라즈베리파이 (0) | 2013.11.13 |
| 이번달의 지름 bose ie-2 (리뷰 아님) (0) | 2013.11.09 |
| 중간고사도 끝났고 하니 (0) | 2013.11.08 |