|
|
|
프로그래밍을 하다보면 중요한 부분이나 검색한 결과를 블로그에 정리하게 됩니다.
정리할 때는 아무래도 소스가 자주 들어가는 데요. 이전에는 그냥 본문과 같은 텍스트형태로 정리해거나 개발툴에서
이미지로 복사해서 올리거나 두가지중 한가지를 택해서 정리하는데 아무래도 나중에 재사용이 용이한 전자를 택하는 경우
가 많습니다.
일반적인 텍스트로 소스를 입력한 경우 단점:
- 본문과 소스가 명확히 구분되지 않는다. 따로 구역을 설정해야 됨
- 소스의 구문강조(형식의 틀에 따라 여러 가지 색과 글꼴로 다르게 보여 주는 개발툴의 기능)가 없어 이해력이 떨어짐.
- 소스의 줄번호가 존재하지 않음.
이렇게 단점들이 존재하는 걸 알면서도 해결법을 적용하지 않았습니다. 최근에 와서야 블로그활동이 부지런해져서 그 해결법을 적용하게 되었습니다.
그 해결법은 SyntaxHighlighter입니다. 해석은 구문강조기라고 해야되나요..^^;
현재 많이 쓰여졌던 1.5버젼을 거쳐 2.0까지 나온 상태입니다.
SyntaxHighlighter는 자바스크립트와 CSS로 HTML태그를 변형시키는 구조입니다. 개인이 만들어도 만들 수 있을테지만.. 시간이 좀 걸릴 듯..
그럼 티스토리에 설치해보겠습니다.
1. 파일 다운로드 및 압축해제
다운로드: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
syntaxhighlighter_2.0.320.zip
다운로드 완료후 압축을 풉니다.
2. 티스토리 관리자페이지> 스킨 > HTML/CSS편집창으로 이동
3. 파일업로드
'파일업로드'탭버튼을 클릭하신 후 파일 업로드합니다. 압축을 푼 폴더 중 script, styles의 모든 파일들을 업로드 합니다.
4. HTML 태그 편집
파일업로드후 HTML/CSS편집 탭을 클릭하여 html <head></head> 사이에 아래 그림과 같이 태그를 입력해 줍니다.
태그:
적용을 하게 되면 위 소스 처럼 나오게 됩니다.
※지원하는 언어들
| 프로그래밍 언어 | 태그 입력될 값 | 참조파일 |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
※ 사용방법
2. html모드 상태에서 쓸 위치에 가서
<PRE class="brush:php">
<!-- 소스코드삽입 -->
</PRE>
입력한다.
3. "brush:" 뒤에 값은 원하는 프로그래밍 언어값으로 위 표를 보고 변경합니다.
더 자세한 내용은 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage#Extracting_the_files 여기를 참조하시기 바랍니다.
써본 결과 입력하는 부분이 불편합니다. html모드를 바꿔가면서 해야 되기 때문입니다.
추후에는 Tistory에 클릭한번으로 바로 입력가능하고 프로그래밍언어도 선택가능한 플러그인을 한번 만들어 볼까 합니다. 언제가 될진 모르겠지만 ^^;
좋은 하루 되세요.
'Talks' 카테고리의 다른 글
| 이미지에서 텍스트를 추출하는 OCR 방법들 (0) | 2009.12.10 |
|---|---|
| 원만한 인간관계를 위한 방법들 (3) | 2009.06.08 |
| 마이크로소프트사의 2019미래비전를 보여준다!! (2) | 2009.05.07 |
| 박지성 2008-2009 시즌 4호 골(동영상)!! (2) | 2009.05.06 |
| 프로그래머를 위한, 프로그래머의 폰트 'Consolas' 글꼴 (0) | 2009.04.30 |
