티스토리 소스코드 꾸미기

티스토리에 소스코드를 추가하면 가독성이 떨어지게 보인다

가독성을 높이는 방법을 정리해보자

 

첫번째. gist 추가하기

티스토리 에디터의 코드블럭 대신에 깃허브의 gist 서비스를 사용합니다

단점 : 일일이 gist 를 만들고 html 모드로 추가해야 해서 번거롭다

장점 : gist 로 만들어 놓으면 여러 곳에 재사용이 가능하다

티스토리 - 코드블럭

코드블럭으로 넣은 소스

gist 로 넣은 소스

작성한 gist 는 embed 로 복사해서 티스토리 에디터의 HTML 모드에 소스를 넣습니다

gist 소스 복사

티스토리 에디터 HTML 모드

티스토리 에디터에서 gist 넣기

 

 

두번째. 코드블럭 테마 적용하기

highlight.js 테마를 적용합니다.

티스토리 관리 > 꾸미기 > 스킨편집 > html 편집 메뉴에서

 

 

head 태그 사이에 css 와 js , 그리고 실행 메소드를 넣습니다

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

테마를 변경하고 싶으면 https://highlightjs.org/static/demo/  에서 적용하고 싶은 테마를 찾고

CSS 명칭을 테마명에 맞게 변경합니다.

default => solarized-dark  로 변경하면 solarized dark 테마로 적용됩니다

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/solarized-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>