티스토리에 가독성 좋은 코드 하이라이트를 넣어보자!

페이지에 글을 코딩글을 게시할 때 엄청나게 가독성이 좋아지고 깔끔해지는 기능.

넣는 방법도 별 어렵지 않으니 코딩글을 게시하는 분들은 적용해보는 것을 강력추천!

(HTML을 배우지않으신 분도 충분히 적용가능합니다)

어떻게 변하는지는 비포에프터 이미지로 한방에..

<↑이렇던 친구가.....> - Before

<↑이렇게 변했습니다! 혁명이에요!> - After

자! 그럼 바로 적용해보도록합시다.

https://highlightjs.org/

해당 링크에서 Get version을 클릭하여 압축파일을 받고 바로 압축을 해제해 줍시다.

압축을 해제한 폴더(highlight)의 highlight.pack.js가 필요하고

styles폴더에서 원하는 코드 스타일을 고릅니다. 코드 스타일을 미리보는 방법은

https://highlightjs.org/static/demo/ 

해당 링크에서 Styles 카테고리를 눌러보시면서 미리 볼 수 있습니다.

미리 본 스타일의 이름과 styles폴더 안에 이름이 같은 css파일이 필요합니다.

두 가지를 잘 준비하셨다면 이제 티스토리에 적용을 해보아야겠지요?

티스토리 관리 - 꾸미기 - 스킨 편집으로 들어가줍니다.

먼저 오른쪽 상단에 파일업로드에서 아까 준비한 두가지 highlight.pack.js와

미리 본 스타일의 이름과 styles폴더 안에 이름이 같은 css파일을 업로드!!

업로드가 다 되었다면 파일업로드 왼쪽 끝에있는 HTML 탭으로 갑니다. 

HTML코드를 보시면 </head>가 있습니다. 이 줄의 바로 위에 아래의 코드를 복사해서 넣어줍니다.

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

그리고 저 코드에서 default 라고 되어있는 부분을 아까 미리 봐둔 스타일의 파일 이름으로 수정해줍니다(골라두신 CSS파일 이름과 같으면됩니다). 

적용이 끝났습니다. 이제 사용하는 방법을 알아볼까요? 어렵지않습니다.

글쓰기를 가신 뒤 HTML체크 박스를 체크해주면 HTML작성으로 변경됩니다.

이렇게 작성하시면됩니다.

<pre><code>이 사이에 코드를 집어넣읍시다.</code></pre>

적용해보시면 정돈된 코드의 모습을 보실 수 있을 것입니다. 

그리고 단, 한가지의 단점이 있습니다. 

C++을 예로들면 #include <iostream> 코드가 들어갈 때, '<', '>' 이녀석들이 출력되지않습니다. 

글씨로 인식하는 것이 아니라 태그로 인식해서인데요. 

해결방법은 간단합니다. '<' 이녀석을 &lt; 이걸로 대체해서 써줍시다. 그러면 해결!