티스토리 뷰

기타/블로그

syntaxHighlighter 를 사용하여 블로그에 코드 적용

북북이와 렛츠기릿 북북이 2014.07.24 11:37

나도 블로그에 java 같은 소스코드를 텍스트가 아닌, eclipse에서 실행한 것 처럼 보이게 적용 하고 싶은데.... 도대체 어떻게 해야하는거야??


구글링 하니까 SyntaxHighlighter 를 적용하면 된다고 친절하게 나와있네..ㅎㅎ 일단 한번 해보자~!!


1. SyntaxHighlighter 사이트

-  http://alexgorbatchev.com/SyntaxHighlighter/

      - 이 사이트 들어가면, 파일 다운로드 및 적용하는 방법이 친절하게 나와있다.

2. 적용 방법

1) 위의 SyntaxHighlighter  사이트 들어가면 우측에 download 라는 메뉴가 있다. 클릭!

2) 마음에 드는 버전을 다운 받는다. 나는 최신버전 3.0.83을 받았다.

3) 압축을 풀어보면, 다음과 같은 디렉토리 구조를 가진다.

  - 필수적으로 scripts에 있는 shCore.js 와 styles 폴더에 있는 shCore.css는 include 해야한다.

  - 본인이 블로그에 적용하고 싶은 프로그래밍 type에 맞는 brush를  선택적으로 추가한다.

    . 모든 brush를 include하면 사용하지도 않는데, 불필요하게 페이지로딩 속도가 늦어지는 문제 발생

    . ex) 내 블로그에 

          java syntax를 적용하려면 -> shBrushJava.js

    javascript를 적용하려면 -> shBrushJScript.js

     를 include 한다.

  - "[참조] tistory 블로그에 적용, include 하는 방법"을 확인하여 적용한다.

4) 글쓰기 모드에서, 우측 하단에 HTML 체크박스를 선택하고, 소스코드를 입력하는 경우 <pre/> 태그를 사용하여, SyntaxHighlighter를 사용한다.

         

# 아래의 사이트에서 사용하는 방법에 대해서는 자세히 나와있다.

http://blog.goooood.net/etc/SyntaxHighlighter%20%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0.php?title=SyntaxHighlighter%C2%A0%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0&idx=14


    

 [참조]. tistory 블로그에 적용하고, include 하는 방법

     1. 티스토리 블로그 ADMIN 메뉴 > 꾸미기 > HTML/CSS 편집 > 파일업로드 Tab 이동

 - "추가" 버튼을 클릭하여, 블로그에 적용하고자 하는 javascript, css 파일을 웹서버에 반영한다.

2. HTML/CSS Tab 이동

 - skin.html에 사용하고자하는 js와 css를 include 한다.

. 하기의 include 소스를 skin.html에 <head>...</head> 태그 사이에 내용을 붙여넣는다.

. shCore.css 와 shThemeDefault.css 는 반드시 include 한다.
















 - 마지막에 highlighter를 실행시키기 위해, SyntaxHighlighter.all() 함수를 호출한다.


댓글
댓글쓰기 폼