[소스코드하이라이터] SyntaxHighlighter

ㅋㅋㅋㅋ나는 정말...바본갑다...

소스코드 하이라이터 열심히 head에 작성해놓고 스킨 설정 저장을 안해놔서

홀라당 날리기를 이번이 5번째...

지친다!!!!!!!!!!!와아악!!!

색깔별로 코드 안쓰고 대충 쓰면 되자녀~ 하기엔

이미 하이라이터로 적은 소스들이 넘나 많은것이다..ㅜㅜㅜㅜ

잊어버릴때마다 남의 블로그 검색하기도 지쳤다....

A-Z까지 정리해놔야지ㅜㅜㅜㅜ

1) 다운

>> SyntaxHighlighter  홈페이지 바로가기 

 Alex Gorbatchev님이 만들어주셨다. 고마워요 알렉스

2) 압축풀고 티스토리 스킨에 파일 업로드

압축을 풀었으면 "scripts" 폴더와 "style" 폴더에서 필요한 스크립트와 css 파일을 블로그에 업로드해줘야하는데,,

저는 script 작성이랑 html/css 작성 정도만 필요해서 파일을 적당히 골라냈습니다.ㅎㅅㅎ

3) 블로그 스킨 편집에 파일을 올려서 저장해줍니다.

 setting -> 스킨 편집 -> 우측 html 편집 -> 파일업로드 

 

3) html head 사이에 스크립트 소스 넣어주기

<script type="text/javascript" src="./images/shBrushBash.js"></script> <script type="text/javascript" src="./images/shBrushCpp.js"></script> <script type="text/javascript" src="./images/shBrushCSharp.js"></script> <script type="text/javascript" src="./images/shBrushCss.js"></script> <script type="text/javascript" src="./images/shBrushDelphi.js"></script> <script type="text/javascript" src="./images/shBrushDiff.js"></script> <script type="text/javascript" src="./images/shBrushGroovy.js"></script> <script type="text/javascript" src="./images/shBrushJava.js"></script> <script type="text/javascript" src="./images/shBrushJScript.js"></script> <script type="text/javascript" src="./images/shBrushPhp.js"></script> <script type="text/javascript" src="./images/shBrushPlain.js"></script> <script type="text/javascript" src="./images/shBrushPython.js"></script> <script type="text/javascript" src="./images/shBrushRuby.js"></script> <script type="text/javascript" src="./images/shBrushScala.js"></script> <script type="text/javascript" src="./images/shBrushSql.js"></script> <script type="text/javascript" src="./images/shBrushVb.js"></script> <script type="text/javascript" src="./images/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="./images/shCore.css"> <link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"> <script type="text/javascript"> SyntaxHighlighter.all(); </script>

위의 내용을 복사해서 </head> 전에다 넣어주기!

4) 사용시  태그에서 해당언어의 클래스를 작성해서 코드를 작성하면 됨

<태그 class="bruch:언어명;">내용</태그>

예 ) <pre class="brush:css;"></pre>

p태그는 게시판 태그랑 겹칠수있으니 <pre>로 사용하는게 나을듯!

예시 )

.css {
  overflow:hidden;
}