Highlight JS로 웹에서 코드를 넣었을 때 자동으로 구문을 강조하는 기능을 추가할 수 있다.
■ 176개의 언어 지원과 79개의 스타일 지원
■ 자동적으로 언어를 감지
■ 다중 언어 코드를 강조
■ node.js 지원
■ markup과 함꼐 작동
■ 모든 js 프레임워크와 호환가능
1. 다운받기
먼저 이러한 기능을 적용 받기 위해서 사이트에 접속한다.
접속하면 아래와 같은 창이 뜬다.
현재 글을 쓴 시점에서는 9.12.0이 최신이다.
버튼을 누른다.
그러면 아래와 같은 화면이 뜰 것 이다.
원하는 언어를 선택한 후 가운데 보이는 Download 버튼을 누른다.
언어를 많이 누를수록 용량이 많이 커지지는 않아 많이 선택해도 상관없다.
2. 적용하기
다운로드 받은 파일의 압축을 푼 후 티스토리에 적용한다.
관리자 모드 → HTML/CSS 편집 → 파일업로드 로 가서 다운받은 파일들을 업로드 추가하고 저장한다.
styles 폴더 밖에 있는 5개의 파일들과 styles 폴더 안에 있는 사용할 스킨 하나만 추가한다.
추가한 후 HTML 탭으로 가서 편집을 한 후 저장을 한다.
<head> 안에 넣고 저장한다.
<link rel="stylesheet" href="./images/적용한 테마 이름(예 androidstudio.css)">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
마지막으로 포스팅을 할 때 오른쪽 위 HTML 모드를 선택한 후 원하는 위치에 태그를 써준다.\
<pre><code class="html">
...
</code></pre>
"html" 자리에는 원하는 언어를 적는다.
완성!
'인터넷 팁 > Tistory' 카테고리의 다른 글
| Tistory & Blogger & Egloos & Naver Blog 비교해보기 (0) | 2018.03.06 |
|---|---|
| Tistory Adsense 팁 (0) | 2018.01.24 |