티스토리 블로그에 구문 강조를 사용하기 위해, 널리 이용되는 SyntaxHighlighter를 간단한 설치와 함께 편집기에서 직접 입력하여 사용할 수 있도로 만들어 봤습니다.
- 널리 사용하는 syntaxhighlighter를 사용하며, 늘 최신 버전을 이용합니다.
- 스킨에 간단히 script 한 줄만을 추가하면 이용할 수 있게 하였습니다. (추가적인 파일 업로드 없이 바로 사용 가능)
- 티스토리 편집기에서만 html 편집을 왔다갔다하는 수고를 덜었습니다.
- pre로 직접 사용하게 되면서 발생하는 개행 태그(br) 문제가 발생하지 않습니다.
[스킨 편집 메뉴 선택]
스킨 편집 메뉴로 갑니다. 아래와 같이 관리자 메뉴 상단의 스킨의 [HTML/CSS 편집]을 선택합니다.
[skin.html 수정]
skin.html에서 "</head>"를 찾아 바로 위에 아래 내용을 삽입합니다.
###html
<script type="text/javascript" src="http://tsyntax.googlecode.com/hg/release/tsyntax.js">
</script>
그러면 아래와 같이 됩니다.
###html
... ...
<script type="text/javascript" src="http://tsyntax.googlecode.com/hg/release/tsyntax.js">
</script>
</head>
사용할 준비가 모두 되었습니다.
[구문강조 편집기에서 사용하기(예제-html)]
글작성 편집기에서 왼쪽과 같은 인용구 버튼을 선택합니다.
이때 가장 첫 줄에 구문강조 하고자 하는 내용에 앞서 추가적으로 입력해야합니다.
이 옵션은 사용하고자 하는 언어 등의 설정으로 "###"문자 이후로 적어주어야만 합니다.
예제로 아래와 같이 작성해 보았습니다.
위와 같이 인용구를 사용하여, 티스토리에서 편집기에서 작성하면 다음과 같이 구문강조가 되어 나타납니다.
### html
<!doctype html>
<html>
<head>
<title>HTML 구문강조 연습</title>
</head>
<body>
<div class="test" style="font:16px gulim"> 구문강조 연습 예제 </div>
</body>
</html>
또한 ###로 시작하는 첫 줄이 없는 경우, 일반적인 티스토리 스킨에 따른 인용구로 표시됩니다.
[설정 부분]
각 설정은 ";"를 사용하여 구분하여 복수의 기능을 나열하여 사용할 수 있습니다, syntaxhighlighter의 class에서 적는 것과 같습니다. 반드시 시작의 첫 행으로 인식하며, 편의상 brush 부분을 생략하였습니다.
- 언어 선택(필수) : ### 이후 처음으로 적을 내용
- 자바스크립트 : js (또는 jscript, javascript)
- CSS : css
- HTML : html, xhtml
- XML : xml, xslt
- PHP : php
- JAVA : java
- PEARL : pearl, pl
- PYTHON : py, python
- C++ : cpp, c
- RUBY : rails, ror, ruby
- BASH/SHELL : bash, shell
- 텍스트 문서 : plain, text
- ...
- html-script: true;
- css, script 및 php 등 html과 같이 사용되어지는 한 문서에서 모두 구문강조 시킬때 사용합니다.
- gutter: false;
- 행번호 출력을 삭제합니다.
- first-line: 150;
- 첫 행의 번호를 150행부터 시작합니다.
- auto-links: false;
- 문서에 있는 링크를 자동으로 거는 것을 막습니다.
- highlight: [2, 4, 6]
- 2,4,6행을 강조합니다.
[관련 문서]
- http://alexgorbatchev.com/SyntaxHighlighter/(SyntaxHighlighter 공식 홈페이지)
- http://code.google.com/p/tsyntax/ (구글 코드 저장소 사용, 티스토리를 위한 지원 및 간단화 작업)
- https://tsyntax.googlecode.com/hg/ (소스 코드 위치)
[주의]
반드시 편집기의 인용구(또는, blockquote) 태그로 소스코드를 작성되어야 하며, 각 행은 편집기에서 엔터로 자동 삽입되는 ("<br />") 태그를 기준으로 행으로 인식합니다. (티스토리의 기본적인 설정 그대로 따르면 문제가 발생하지 않습니다.)
'초보얌 작업 > TSYNTAX' 카테고리의 다른 글
| TSYNTAX - 티스토리, 구문강조(SyntaxHighlighter)의 간결 사용 (11) | 2010/09/05 |
|---|
