티스토리에서 코드 예쁘게 올리기(highlight.js)

1. 공식 홈페이지 접속
https://highlightjs.org/download/

 

2. 언어 선택 뒤 다운로드
기본 언어는 체크되어 있으니 그냥 바로 중간에 있는 Download를 누르면 된다.

 

3. 파일 2개 업로드
    1) 위치: 꾸미기-스킨 편집-html 편집-파일업로드
    2) 파일:
          highlight.pack.js
          테마.css

테마.css는 styles폴더 안에 있으며 원하는 것을 골라 업로드하면 된다.

테마 미리보기는 이곳에서
https://highlightjs.org/static/demo/

 

4. html 파일에 코드 입력

<link rel="stylesheet" href="./images/테마.css"> 
<script src="./images/highlight.pack.js"?</script> 
<script>hljs.initHighlightingOnLoad();</script>

 

5. 글쓰기
    1) 방법1: 에디터에서 코드쓰기 버튼을 눌러 코드 입력 
    2) 방법2: 그냥 코드 입력 후 html모드에서 [pre][code]코드[/code][/pre] 이렇게 감싸주기

 

*에디터가 자꾸 코드로 자동변환해서 일단 <>를 []로 올림.

실제로는 <>로 올려야함.

 

글쓰기 상태에서는 예쁘게 안나오지만 글 완료를 누른 뒤 확인해보면

이렇게 예쁘게 나온다(테마는 agate로 함)

참고로 css나 jquery는 그대로 올리면 안되고,

각각 <style></style>과 <script></script>안에 써줘야지 정상적으로 인식된다.