dp.SyntaxHighlighter를 이용한 코드 하이라이트

2008/06/17 23:45
크리에이티브 커먼즈 라이선스
Creative Commons License
이전에 올렸던 포스트는 .. css를 추가해야되서 ... 좀 불편하다.

사실 이것도 .. .js를 왕창 추가해야되는 불편함은 있지만..

한번 하게 되면, pre 로 묶어주기만 하면 되니 .. 전보단 더 편하다.

사용방법은 다음과 같다.

1. http://code.google.com/p/syntaxhighlighter/ 에서 [SyntaxHighlighter_1.5.1.rar] 파일을 다운 받는다.

2. tistory 스킨 / 파일올리기 를 통해 해당 파일의 scripts 파일을 모두 올린다.(플래시 파일역시 올려야 한다!)

3. skin.html의 맨 마지막에 다음을 추가 한다.

4. skin.html에 상단부분 스타일시트 부분에 다음을 추가 한다.
<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>

5. 글 작성시 html모드로 변경하고, 해당 부분을 묶어 준다.

     ex > <textarea class="cpp" name="code">
 int main() { return 0; }
</textarea>
             (class 부분은 언어를 기입하면 된다.)


Pupustory Dev/Tip

  1. Blog Icon
    지나가다가

    이걸 보면서 그냥 티스토리에 욕밖에 안나가네요...
    그렇게 요구하는 사람이 많은데...만들어 안주니...무료라서...그런지 뭐..
    이것땜에 워드프레스로 옮기려다 두루 찾아보는 중입니다....

    함 적용해봐야겟네요....

  2. 그러게 말입니다. 그냥 기본적으로 적용해주지 . 아니면 글쓸때 이지윅에서 블럭 지정해서 해당부분은 코드 하일라이팅 해주던가 해주지 .. 이거 적용할때 너무 불편합니다 ㅠㅠ

  3. 안녕하세요. 잘 쓰고 있습니다...

    권해주신대로 textarea를 사용했더니 구글 리더에서 해석해주지 않습니다.

    다른 리더는 어떨런지 모르겠지만,,,

    그래서 그냥 pre로 사용하고 있습니다.

    그럼 좋은 하루 되시길....

  4. 이거 보고 개발 블로그 티스토리로 확 옮겨버렸어요
    WP를 code-highlight 때문에 썼는데 이런 방법이 있었다니...
    적용 잘 되네요 ^^ 감사합니다

  5. 와,, 덕분에 코드를 한결 깔끔하게 볼 수 있게 되었네요~ ^^

    덕분에 좋은거 알고 갑니다~ 감사해요~~