페이지에 글을 코딩글을 게시할 때 엄청나게 가독성이 좋아지고 깔끔해지는 기능.
넣는 방법도 별 어렵지 않으니 코딩글을 게시하는 분들은 적용해보는 것을 강력추천!
(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> 코드가 들어갈 때, '<', '>' 이녀석들이 출력되지않습니다.
글씨로 인식하는 것이 아니라 태그로 인식해서인데요.
해결방법은 간단합니다. '<' 이녀석을 < 이걸로 대체해서 써줍시다. 그러면 해결!
'Tip' 카테고리의 다른 글
삼성뮤직을 PC에서 재생하는 방법 두가지(삼성뮤직 PC) (2) | 2018.09.01 |
---|---|
이클립스(Eclipes)에서 중괄호 자동 정렬, 줄 바꿈 설정 (0) | 2018.06.17 |
윤년과 평년 (2) | 2018.03.07 |
뒷 문자 백스페이스(Delete) 하는 키 (1) | 2018.03.07 |