준비작업
Tistory에 파일 업로드
HTML에 Syntaxhighlighter 설정
2. SyntaxHighlighter는 Option을 설정할 수 있다.
글 작성시에 보여주고 싶은 코드를 삽입하기
SyntaxHighlighter 스크롤바(Scrollbar) 제거하기
Tistory에 파일 업로드
1. Syntaxhighlighter 파일 압축을 푼다.
2. 티스토리 -> 스킨 -> HTML/CSS편집 -> 파일업로드에서 Syntaxhighlighter를 업로드 한다.
3. 업로드하면 자동으로 업로드한 모든 파일이 ./images/ 폴더안으로 업로드된다.
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/ 참조
기타 여러가지 옵션들은 http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ 참조
글 작성시에 보여주고 싶은 코드를 삽입하기
글쓰기에서 HTML모드로 전환한 뒤 소스코드에 다음과 같이 적는다.
<pre class="brush: html">
<pre class="brush: html">
소스코드
</pre>
이렇게 작성하고 저장하면 화면에는
brush aliases 들은 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 을 참고.
이렇게 작성하고 저장하면 화면에는
소스코드처럼 나오게 된다. 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 파일 수정
shCore.css 파일을 위와 같이 수정한다. overflow 속성을 auto에서 hidden 으로 변경
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 |