[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



'일상 > 정보 수집' 카테고리의 다른 글

markdown 사용법  (0) 2016.03.25
[Highlight.js] Tistory 소스코드 하이라이트  (0) 2015.09.30
[SyntaxHighlighter] Tistory 소스코드 하이라이트  (0) 2015.06.29
원격  (0) 2013.11.20
소스코드 하이라이트  (0) 2013.06.04
원격 데스크탑 설정 가이드 라인  (0) 2013.01.11

+ Recent posts