티스토리 highlight.js 적용시키는 법

개발 관련 블로그이다 보니 코드 넣을 일이 많습니다.

그래서 이쁘게 보일게 어디 없을까 생각하다가 Highlight.js를 알게 되었어요.

설치방법과 적용법은 https://highlightjs.org/ 여기 들어가시면 있습니다.

우선 첫번째 적용법은

1. CDN 방식

티스토리 관리자 -> 꾸미기 -> 스킨편집 -> html 편집 -> HTML 탭에서 </head>위로 위의 코드를 넣어주면 됩니다.

cdnjs 코드를 보시면 두 번째 줄 오른쪽에

default.min.css가 보이실겁니다. 이 css 파일은 테마 스타일인데

위의 주소로 들어가면 테마 스타일을 볼 수 있습니다.

마음에 드시는 것을 선택해서 넣어주시면 되겠네요.

2. 설치 방식

자신이 하고싶은 언어를 체크하고 밑으로 내리시면 Download 버튼이 있습니다.

Download 버튼을 눌러줍니다.

위 2개의 파일이 있는데 이 파일을

티스토리 관리자 -> 꾸미기 -> 스킨 편집 -> 파일 업로드 들어가서 highlight.pack.js 파일만 업로드를 해줍니다.

그리고 자신이 원하는 테마를 styles 파일에서 선택해 파일을 올려줍니다.

저는 Androidstudio 테마를 선택했습니다.

그리고 HTML 탭으로 가서 아래의 텍스트 파일 다운받으셔서 다음과 같이 코드를 넣어줍니다.

<head> 위에다가

그리고 게시글을 쓸 때

본문의 HTML 태그에서

코드 입력

</code></pre>

이렇게 넣어주시면

이렇게 이쁘게 나오는 것을 볼 수 있습니다.

옆의 line number 설정하는 법은 아래의 링크를 확인해주세요.

코드를 분석해라