'code highlight' 태그의 글 목록

code highlight

TISTORY에 Script base code highlighter 적용 방법 2007.12.02 1

TISTORY에 Script base code highlighter 적용 방법

2007. 12. 2. 23:15

설치형 블로그에서 syntaxhighlighter를 이용하는 방법을 보고 TISTORY에 적용해 보았습니다.

1. high lighter 다운로드

http://code.google.com/p/syntaxhighlighter/

100% 자바 스크립트 사용

2. 설치

다운로드 받은 파일을 압축을 푼후

Scripts 폴더안의 모든 파일, Styles 폴더안의 모든 파일 을 upload한다.

직접올리기

모두 업로드하게 되면 ./images/디렉토리 안에 upload되어 있는것을 확인할 수 있다.

이미지올리기

3. 블로그 CSS수정

스킨 수정

관리 메뉴에서 스킨-HTML/CSS 편집선택

CSS편집

skin.html 스킨의 </body> 앞에 아래 script추가

<link type="text/css" rel="stylesheet" <br />
  href="./images/SyntaxHighlighter.css"><br /> </link>
<script language="javascript" src="./images/shCore.js"></script>
<script language="javascript" src="./images/shBrushCpp.js"></script>
<script language="javascript" src="./images/shBrushCSharp.js"></script>
<script language="javascript" src="./images/shBrushCss.js"></script>
<script language="javascript" src="./images/shBrushDelphi.js"></script>
<script language="javascript" src="./images/shBrushJava.js"></script>
<script language="javascript" src="./images/shBrushJScript.js"></script>
<script language="javascript" src="./images/shBrushPhp.js"></script>
<script language="javascript" src="./images/shBrushPython.js"></script>
<script language="javascript" src="./images/shBrushRuby.js"></script>
<script language="javascript" src="./images/shBrushSql.js"></script>
<script language="javascript" src="./images/shBrushVb.js"></script>
<script language="javascript" src="./images/shBrushXml.js"></script> 
<script language="javascript"> 
dp.SyntaxHighlighter.ClipboardSwf = <br />
  'http://your_address/images/clipboard.swf'; 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

4. 문서 작성

이제 원하는 코드를 작성해서 블로그에 올려보자.

code 편집

미리보기

아름답다 ^^

EOF

PREV 1 NEXT

루키 프로그래머의 서재

code highlight

TISTORY에 Script base code highlighter 적용 방법

+ Recent posts

티스토리툴바