준비작업
syntaxhighlighter_3.0.83.zip
SyntaxHighlighter 3.0 Download Website

Tistory에 파일 업로드
1. Syntaxhighlighter 파일 압축을 푼다.

2. 티스토리 -> 스킨 -> HTML/CSS편집 -> 파일업로드에서 Syntaxhighlighter를 업로드 한다.
  • 업로드 파일 Syntaxhighlighter 폴더에서
    • ./scripts 폴더안에 있는 js 파일
    • ./styles/shCore.css
    • ./styles/shThemeDefault.css


3. 업로드하면 자동으로 업로드한 모든 파일이 ./images/ 폴더안으로 업로드된다.

HTML에 Syntaxhighlighter 설정
1. [HTML.CSS 편집]의 skin.html 에서 <head></head> 사이에 위와 같은 코드를 적어준다.
2. SyntaxHighlighter는 Option을 설정할 수 있다.
SyntaxHighlighter.config.stripBrs = true; // 코드안에 <br/>태그를 무시한다(True)
SyntaxHighlighter.defaults['toolbar'] = false; // SyntaxHighlighter 태그를 표시안한다(False)
SyntaxHighlighter.defaults['tab-size'] = 4; // Tab-size 크기를 4로 정한다.

기타 여러가지 옵션들은 http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ 참조

글 작성시에 보여주고 싶은 코드를 삽입하기
글쓰기에서 HTML모드로 전환한 뒤 소스코드에 다음과 같이 적는다.
<pre class="brush: html">
소스코드
</pre>

이렇게 작성하고 저장하면 화면에는
소스코드
처럼 나오게 된다. class에는 brush: html 이외에 brush: js, brush: plain, brush: ruby, brush: php 등 다양하게 있다.
brush aliases 들은 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 을 참고.

SyntaxHighlighter 스크롤바(Scrollbar) 제거하기
3.0 버전부터 소스코드가 길어질 경우 스크롤바가 생기는 문제가 있다. 해결방법은 2가지가 있다.
1. 스크롤바 자체를 안생기게 하기 ( 소스코드가 길 경우 화면에서 잘리는 문제가 있다. )
shCore.css 파일 수정

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 1em !important;
}

shCore.css 파일을 위와 같이 수정한다. overflow 속성을 auto에서 hidden 으로 변경

2. 세로 스크롤바만 없애기 ( 추천 )
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow-y: hidden !important;
  font-size: 1em !important;
  white-space: pre-wrap; word-break: break-word;
}



'Technology > Programming' 카테고리의 다른 글

Python / 파일 읽기, 파일 쓰기  (0) 2011.01.14
JAVA / 파일 읽어오기, 파일 입력 처리  (0) 2011.01.14
JSP / XML, XSL를 이용하여 HTML 변환하기(Transform)  (0) 2010.12.27
Python / Python 예외처리  (0) 2010.11.02
Tools / Syntaxhighlighter + Tistory  (0) 2010.04.19

+ Recent posts

티스토리툴바