얼마전 까지 블로그에서 SyntaxHighlighter를 사용 했습니다.
기능도 많고, 좋은데... 뭔가 약간 마음에 들지 않아서..
정확하게 이야기 하면.. 블로그에 이쁘게 붙는 느낌이 안 들어서 ^^;;;;
다른 소스 하이라이터를 찾아 보다가..
highlight.js를 찾았습니다.
이 하이라이터가 마음에 드는건... 테마가 다양하고, 홈페이지에 붙어 있는데..
이질감이 많이 들지 않는다는 점입니다.
하지만, 마음에 들어도..쓰기 힘들다면, 말짱 도루묵이겠죠?
그런데, 이 놈은.. 쓰는 것도 SyntaxHighlighter보다 편하네요 ^^;
아주 딱이네요.
이제 사용법을 설명 드리겠습니다.
먼저
http://softwaremaniacs.org/soft/highlight/en/download/
여기로 갑니다.
원하는 언어를 선택하고 다운로드 받습니다.
압축을 풀면 아래와 같이 나옵니다.
파일이 많지만, 필요 한건 highlight.pack.js와 styles에서 사용자가 필요한 css 파일 정도 입니다.
26가지 정도의 스타일 테마가 있지만, 여기서는 tomorrow-night-bright.css 를 사용하겠습니다.
Tistory에서 관리에 가서 스킨 > 파일 업로드를 선택합니다.
추가 버튼을 누르고
- highlight.pack.js
- tomorrow-night-bright.css
이 두 파일을 업로드 해 줍니다.
그리고, HTLM/CSS 탭으로 갑니다.
head에서 title 정도 위치를 찾아서 적당히 아래 내용을 넣어 줍니다.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="./images/tomorrow-night-bright.css">
<script src="./images/highlight.pack.js"></script>
<script type="text/javascript">
/* jQuery 부분 */
jQuery.noConflict(); // 다른 라이브러리와 충돌을 방지한다.
jQuery(document).ready(function(){ // 문서가 모두 읽힌 후에 다음을 실행
jQuery("blockquote").each( function() { //blokquote가 사용한 태그
if (jQuery(this).attr('class'))
// 그중 클래스명 있는 것만 찾기
{
var temp = jQuery(this).html(); // 내용 복사
temp = temp.replace(/\n/gi, "");
temp = temp.replace(/<BR>/gi, "\n");
temp = temp.replace(/<BR \/>/gi, "\n");
temp = '<pre><code class="'+ jQuery(this).attr('class') + '">'+temp+'<\/code><\/pre>'
jQuery(this).after(temp); // 뒤에 새 작성된 pre 또는 script태그로 붙인다.
jQuery(this).remove(); // 기존의 인용태그 삭제
}
});
hljs.initHighlightingOnLoad();
});
</script>
이렇게 하시면, 설정은 모두 끝난 겁니다.
이제 사용 하시면 됩니다.
사용 방법은 아래와 같습니다.
먼저 편집 페이지에서 편집을 하시다가 코드를 그냥.. 붙여 넣기 합니다.
그리고, 하이라이트 하고 싶은 코드를 선택 하고, 인용구를 선택 합니다. 이렇게 하고 나서, html 편집 모드로 가서 하이트 될 언어를 지정하시면 됩니다.
지정하는 방법은 코드내에서 blockquote를 찾으시고 옆에 보면 class라고 보이실 겁니다.
기본으로 되어 있는 값(tx-quote-tistory)을 지우시고 해당 언어로 변경 하시면 됩니다.
여기서는 html 코드라서 html로 변경 했습니다.
그리고 html 체크 박스 버튼을 꺼서 편집 모드로 가시면 됩니다.
이렇게 하면, 위와 코드가 나옵니다.
추가로... 기본 테마를 사용 하시면, 스크롤바와 라운드가 네모 반듯 하게 나옵니다.
css 파일에 pre code 블럭에 overflow:auto; 와 border-radius를 설정 하시면, 위와 같이 나옵니다.
아래는 제가 사용하는 css 일부 입니다.
pre code {
display: block;
background: black;
color: #eaeaea;
padding: 0.5em;
overflow: auto;
overflow-x: auto;
overflow-y: auto;
-moz-border-radius: 5px;
border-radius: 5px;
}
그럼 잘 사용 하세요~ ^^*
댓글