파일을 v3.0.9로 업데이트했습니다!
코드 하이라이팅으로 매우 유명한 Syntax Highlighter을 티스토리에 적용해 보도록 합시다. 역시 BLUEnLIVE님이 수정하신 거..
SH_TiStory.zip위 파일의 압축을 풀고 shCore.js, shCoreEclipse.css 파일을 HTML/CSS 편집→파일 업로드에 올립니다. 그리고 Brush 폴더 안에서 자신에게 필요한 브러쉬 파일들을 찾아서 그 파일들도 업로드합니다. 예를 들어서 HTML은 shBrushXml.js, C++은 shBrushCpp.js 파일을 업로드하면 됩니다. 다른 브러쉬 파일이나 업데이트된 파일들은 여기나 인터넷에서 더 받으실 수 있습니다.
업로드 완료 후 아래 내용을 skin.html의 <head>~</head> 사이에 넣으시고
<script src="./images/shCore.js"></script> <script src="./images/브러쉬 파일명.js"></script> <link rel="stylesheet" href="./images/shCoreEclipse.css"> <script> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
강조된 줄 부분을 업로드한 브러쉬 수만큼 맞게 고쳐서 넣어야 합니다. 그리고 아래 내용을 style.css에 추가 해주세요.
div.syntaxhighlighter {overflow-y: hidden!important;}
div.syntaxhighlighter div.container:before {display:none;}
사용법!
<pre class="brush:html"> 내용 </pre>
<script type="syntaxhighlighter" class="brush:html"> 내용 </script>
위와 같은 방식으로 사용하시면 됩니다. 첫째줄에 html를 수정해서 다른 브러쉬를 사용하실 수 있고요. <pre> 방식이랑 <script> 방식이 각각 장단점이 있습니다.
<pre> 방식은 페이지 로딩 중엔 알맹이(?)만 보이다가 로딩이 끝나면 하이라이팅이 되는 대신에 모종의 이유로 Syntax Highlighter가 작동하지 않아도 알맹이(?)는 볼 수 있고 <script> 방식은 로딩 중엔 아무것도 안보이다가 로딩이 끝나면 뿅하고 나타나는 대신에 Syntax Highlighter가 작동하지 않으면 코드를 볼 수 없습니다.
이것 말고도 class를 수정해서 다른 기능을 추가할 수 있습니다.
1. 줄강조
<pre class="brush:html;highlight:[1,3]"> 첫째와 셋째줄 하일라이팅~ </pre>
2. 코드 접기
<pre class="brush:html;collapse:true"> 코드 접기~ </pre>
3. 줄시작 번호 설정
<pre class="brush:html;first-line:5"> 줄이 5부터 시작하죠?ㅋ </pre>
4. 줄번호 끄기
<pre class="brush:html;gutter:false"> 줄번호가 없습돠.. </pre>
5. 탭 길이 설정
<pre class="brush:html;tab-size:3"> 탭길이 3 3 3 </pre>
<pre class="brush:html;tab-size:5"> 탭길이 5 5 5 </pre>
6. 툴바 없애기
<pre class="brush:html;toolbar:false"> 오른쪽 위에 ?가 없어짐요. 3버전부터는 쓸모 없어진 듯? </pre>
출처 : http://zoc.kr/970
'티스토리' 카테고리의 다른 글
| 관리자로 로그인하면 애드센스 안보이게 하기 (3) | 2011.10.23 |
|---|---|
| 글 위에 애드센스 두 개 나란히 삽입하기 (0) | 2011.10.18 |
| 블로그 주소 하나로 통일하기 (11) | 2011.10.12 |
| 애드센스 가입방법 (2) | 2011.10.06 |
| 티스토리 단축키 (4) | 2011.10.03 |
| Cumulus 1.23 (0) | 2011.09.24 |
| 글을 작성한 날짜를 클릭하면 해당 날짜에 쓴 글 보여주기 (0) | 2010.04.04 |
| 링크목록을 드롭다운 목록으로 보여주기 (0) | 2009.11.10 |