일상/정보 수집
[Highlight.js] Tistory 소스코드 하이라이트
JAYNUX
2015. 9. 30. 14:30
[Highlight.js] Tistory 소스코드 하이라이트
Highlight.js 소개
홈페이지: click
라이브 데모: click
설치방법
1) 홈페이지가서 다운로드 받음
2) 파일업로드
highlight.pack.js
styles/"원하는 하이라이트 파일"
ex: monokai_sublime.css
아래의 데모에서 각각의 스타일의 표시 방식을 볼 수 있다.
라이브 데모: click
3) CSS/HTML 수정
<head> ... </head>
저 사이에 아래의 코드를 삽입 해야한다.
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script><script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
위코드에서 빨간색 부분이 스타일을 나타낸다.
사용방법
Html 편집 모드에서 아래의 코드를 앞뒤로 삽입 하면 된다.
<pre><code class="html">...</code></pre>참고사이트
http://webdir.tistory.com/439