tistory markdown으로 작성하기 및 코드 syntax highlighting하기

블로그에 글을 쓰면서 예쁘게는 쓰고 싶고, 독자들이 읽기 편했으면 좋겠다는 생각을 많이 했습니다. 그래서 글자 크기를 좀 키웠고 코드는 인텔리제이에서 예쁘게 복사해서 가져왔습니다. 그런데 복사 붙여넣기 한게 약간 자기 마음대로 줄간이나 글자 크기가 설정 될 수 있었습니다.

(제가 대단히 디자인이 멋진 글을 쓰진 않기 때문에) 일관된 포멧으로 글을 써야겠다고 마음 먹었고, 그 포멧은 마크다운이었습니다.

그래서 구글에 ‘tistory markdown’이라고 검색해서 아무거나 따라해봤는데 뭔가 이상한 겁니다. 왜냐하면 제가 쓰는 스킨(다이나마이트 스킨)이 마크다운을 지원하는 스킨이어서 그런 거였더군요.

그런데 문제는 코드를 표현하지 못하는 것이었습니다. 그냥 일반적인 텍스트로 나오더군요. 이리 저리 CSS를 수정하고 다른 마크다운 CSS에서 복사도 했었는데, 결국은 실패했습니다.

그러다가 텍스트 에디터로 쓰려던 stackedit에서 highlight.js라는 것을 보게 되었습니다.

https://highlightjs.org

HTML 편집해서 아래 코드를 삽입했습니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>

그러니까 코드가 잘 나오네요.