관련 싸이트 : http://code.google.com/p/syntaxhighlighter/

1단계, 위 싸이트에 가서 SyntaxHighlighter 를 다운로드 한다.
사용자 삽입 이미지




2단계, 압축을 풀고, Scripts 와 Styles 폴더가 있는 것을 확인 한다. 이것들을 업로드 할것이므로 기억 한다.
사용자 삽입 이미지





3단계, Tistory로 돌아 와서, Admin 모드에서 스킨 --> 직접올리기 로 이동 한다.
사용자 삽입 이미지




4단계, 직접올리기에 보면, .. 파일 업로드가 보일 것이다. 그것을 눌르고 아까전에 했던 폴더 두개에 있는 모든 파일을 올린다.
사용자 삽입 이미지


4단계, 다 올렸다면 스킨 --> HTML/CSS 편집으로 이동 한다.
<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>
이 문구를 <link> 들이 뭉친곳에 올려 둔다. skin.html 의 최상단 부분을 보면 된다.
아래 그림 클릭 하면 자세하게 볼수 있다.
사용자 삽입 이미지


5단계, 다시 skin.html 의 최 하단에 아래 문구를 넣어 둔다.
<!-- google code for syntaxhighlight -->
<script class="javascript" src="./images/shCore.js"></script>
<script class="javascript" src="./images/shBrushCpp.js"></script> 
<script class="javascript"> 
dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';   
dp.SyntaxHighlighter.HighlightAll('code'); 
</script> 
<!-- google code for syntaxhighlight -->

여기서 중요 한 것 세가지
1. 올렸던 파일들은 images 폴더에 자동으로 올라간다 그렇기 때문에 상대주소로 ./images/?????.js  식으로 써야 한다. 잘 모르겠다면 위의 코드 그대로 붙여쓰면 된다. 만약 더 추가 하고 싶다면,
<script class="javascript" src="./images/shCore.js"></script> <-- 이 코드 아래
<script class="javascript" src="./images/shBrushCpp.js"></script>   <-- 이런식으로 C# 등등 추가 하면 된다.
2. <script class="javascript" src="./images/shCore.js"></script> 이것이 다른 js 파일들보다 위에 있어야 한다.

3.  아래 문구 위에다가 위에 문구를 넣어야 한다는 것
</body>
</html>

자세한것은 아래 그림 클릭
사용자 삽입 이미지


6단계, 이제 글쓰기로 가서, 글을 쓰는데 HTML 모드로 글을 써야 한다.
아래 그림을 자세히 보면 edit↓ 라고 표시된 곳이 있을 것이다. 사진 가운대 우측에 있다.
아래 그림 클릭
사용자 삽입 이미지


7단계,
우선 줄 바꿈 자동 추가 를 해제 한다.
그리고 아래 문구를 넣는다.,

<textarea name="code" class="c++">
// 여기에다가 넣고 싶은 c++ 코드를 넣으면 된다.
</textarea>

사용자 삽입 이미지


8, 단계 이제 저장 버튼을 눌르면 잘 나올것이다.
여담으로 http://code.google.com/p/syntaxhighlighter/wiki/Usage 여기에 가면, 사용 방법에 대해서 잘 나올것이다.

.. 잘 안되면 댓글 달아 주세요.



posted by 농사를 짓는 게임 프로그래머 최익필

댓글을 달아 주세요

  1. Favicon of http://dodoubt.tistory.com ohyecloudy 2008.07.14 22:55 신고  Addr  Edit/Del  Reply

    <br /> 이 걸러지지 않고 그대로 나오지 않나요? <br />을 제대로 처리하기 위해선 전 dp.SyntaxHighlighter.BloggerMode(); 이 함수를 사용했습니다. 혹시 다른 방법을 사용했나요?

  2. Favicon of http://pupustory.tistory.com Pupustory 2008.07.25 16:12 신고  Addr  Edit/Del  Reply

    에고 .. 저도 블로그에 했었는데 .. 스킨 바꾸면서 날라가서 안되고 있었네요 ; 예전에 댓글 봤지만 개을러서 이제서야 고칩니다 ^^ 친절한 설명 감사해요 ~

  3. Favicon of http://funeasy.tistory.com funeasy 2008.10.16 17:22 신고  Addr  Edit/Del  Reply

    덕분에 잘 설치 했습니다. ^^ 좋은 정보 감사드려요 ^^

  4. Favicon of http://mcwizard.tistory.com mcwizard 2008.10.31 10:28 신고  Addr  Edit/Del  Reply

    전왜 번호가 밀려서 써질까요. 녹색라인이 일렬이아니라

    소스부분에선 한칸미려서써지고 회색은 그냥비어잇네요 ㅡㅠ

  5. 두식아빠 2009.10.08 00:16 신고  Addr  Edit/Del  Reply

    감사합니다. 잘 되네요. ^^