카테고리 없음

티스토리에 소스 코드 보기 좋게 하기 (highlight.js 사용하기)

가는가래 2017. 11. 11. 12:01


다른 사람은 티스토리에 소스코드를 보기 좋게 올리는데 어떻게 해야하지?


1. 구글에서 highlight.js 검색

2. https://highlightjs.org/ 찾아서 이동

3. hightlight.js는 Syntax highlighting for the Web, 176 languages and 79 styles support 

4. Get version 9.12.0 download

5. CDN을 사용하던지 아니면 Custom package에서 사용할 언어 선택 후 라이브러리 다운로드 

6. 난 Custom package를 이용해 디폴트 다운로드 

7. highlight.zip 파일 다운로드 됨. 압축 해제

8. https://highlightjs.org/usage/ 에 사용법 이 나와 있음


간단하게 path 맞춰주고 아래 소스 스킨에 추가 (tistory는 스킨 소스코드 수정기능 제공)

스킨 수정 모드는 : admin > HTML, CSS 변경 > 파일 업로드 및 HTML, CSS 수정

스킨수정화면에서 파일업로드 후 ( js, css 업로드 ) 



<link rel="stylesheet" href="/path/to/styles/default.css">

<script src="/path/to/highlight.pack.js"></script>

<script>hljs.initHighlightingOnLoad();</script>


앞으로 post 작성 할 때 소스코드가 있으면 아래의 tag를 추가해서 해당 부분에 넣음.


<pre><code class="java">

소스 코드

</code></pre>



이런거는 티스코리가 에디터에 기능으로 추가해주면 좋을것 같음. 디폴트 말고 그냥 필요한 사람 선택 기능으로~