고정 헤더 영역
상세 컨텐츠
본문
티스토리 소스코드 플러그인
티스토리는 소스코드 플러그인이 없습니다. 하지만 최소 4줄만 추가하면 티스토리에서도 소스코드를 보기좋게 넣을 수 있습니다. 전 세계적으로 많이 사용되는 워드프레스는 기본으로 소스코드 삽입 태그를 지원합니다. 글 쓰다가 [code] [/code] 사이에 소스코드를 넣으면 그 부분만 알아서 보기 좋게 바꿔줍니다. 여기에 사용되는 것이 Alex Gorbatchev가 개발한 SyntaxHighlighter입니다. 처음 들었을 때는 별 생각이 없었는데 자세히 보니 성이 고르바쵸프군요.
티스토리에서도 SyntaxHighlighter를 사용할 수 있습니다. 사용 방법은 두 가지가 있습니다. 두 가지 모두 최종적으로 HTML/CSS 편집 메뉴에서 자바 스크립트와 CSS 파일의 위치를 추가해 주는 것은 똑같습니다.
첫 번째 방법은 직접 티스토리에 파일을 설치하는 방법입니다. SyntaxHighlighter 홈페이지에서 압축 파일을 다운 받은 후, 압축을 풀고, 티스토리 HTML/CSS 편집 메뉴에서 그 파일들을 업로드 해야 합니다. 티스토리에 파일이 올라가 있기 때문에 파일 읽은 속도가 빠르다는 장점이 있습니다. 대신 파일을 받아서 압축을 풀고 티스토리에 업로드 해야 합니다.
두 번째 방법은 티스토리에 파일 설치를 건너뛰고, 제작자가 이미 아마존 S3에 올려놓은 파일들을 이용하는 방법입니다. 장점은 소스코드를 다운로드 해서 압축을 풀어 티스토리에 올릴 필요가 없기 때문에 앞의 방법보다 금방 끝납니다. 단점은 외부에 있는 파일을 읽어와야 하기 때문에 파일을 읽어오는 시간이 조금 걸립니다. 하지만 외부에서 읽어야 할 파일이 몇 개 되지 않기 때문에 속도에 큰 지장은 없습니다.
파일 올리기도 귀찮고 해서 그냥 제작자가 공유한 링크를 사용하기로 합니다.
SyntaxHighlighter
SyntaxHighlighter는 http://alexgorbatchev.com/pub/sh/current/ 밑에 공유 되어 있습니다. SyntaxHighlighter를 사용하기 위해 필요한 가장 기본적인 파일 3개는 아래와 같습니다.
- styles/shThemeDefault.css
- styles/shCore.css
- scripts/shCore.js
그 외에 원하는 자주 사용하는 문법을 골라 자바 스크립트를 추가해 주면 됩니다. SyntaxHighliter에서 지원하는 문법(Brush)과 그에 다른 파일 목록은 아래와 같습니다. 총 23개의 문법을 지원하지만 제가 자주 사용하는 몇 개만 간추린 목록입니다. 전체 목록은 링크에서 확인하시면 됩니다.
|
Brush Name |
Brush Alias |
File Path |
|
CSS
|
css |
script/shBrushCss.js |
|
JavasCript |
js |
script/shBrushJScript.js |
|
Java |
java |
script/shBrushJava.js |
보통 하나의 글에서 한 개의 문법만 사용하겠지만, 블로그는 모든 글에 동일한 설정이 적용됩니다. 따라서 어떤 문법을 쓸 지 모르니 사용가능한 모든 문법 파일을 스킨에 추가해야 합니다. 그렇다고 23개 파일 모두를 추가하면, 안 쓰는 22개의 파일을 읽는 시간 때문에 페이지가 늦게 뜹니다. 그래서 자주 쓰는 문법 몇 개만 골라서 파일을 읽어들이도록 해야 합니다. 저는 자주 사용하는 3개만 불러 오기로 합니다.
HTML/CSS 편집
기본 파일 3개와 문법 파일 3개, 총 6개의 파일을 스킨에 추가해야 합니다. 파일의 위치는 모두 앞에 http://alexgorbatchev.com/pub/sh/curren/를 붙이면 됩니다. 6개의 파일을 추가하려면 아래와 같이 써 주면 됩니다. js로 끝나는 파일은 <script> 태그로 불러 들이고, css로 끝나는 파일은 <link>태그로 불러들일 수 있습니다.
추가된 SyntaxHighlighter를 활성화 시키려면 아래의 자바 스크립트 코드가 필요합니다.
SyntaxHighlighter.all();
이제 스킨 편집을 해보겠습니다. 티스토리 메뉴 중 HTML/CSS 편집으로 갑니다. 아래와 같이 <head> 밑에 아무 곳에나 위에 만들어 놓은 태그와 스크립트를 추가합니다.
저장을 누르면 스킨 편집이 끝났습니다. 실제 사용하는 법을 알아보겠습니다.
SyntaxHighlighter 사용법
티스토리는 WYSWYG 편집기를 제공합니다. HTML 전문가를 위해 편집기 우측 상단에 HTML 버튼이 있습니다. HTML 버튼을 누르면 HTML 편집 모드로 바뀝니다. 원하는 곳에 커서를 위치하고 <pre class="brush:[brush alias]></pre> 태그사이에 소스코드를 넣습니다. [brush alias] 부분은 원하는 Brush Alias로 대치하시면 됩니다. 예를 들어 자바 스크립트 코드를 삽입하신다면 아래처럼 <pre class="bush: js"></pre> 태그 사이에 자바 스크립트 코드를 넣으면 됩니다.
function add(a, b) {
return a + b;
}
그러면 아래처럼 코드가 예쁘게 보입니다.
function add(a, b) {
return a + b;
}
더 자세한 사용법은 링크를 참조 하시면 됩니다.
티스토리에 소스코드 플러그인 설치 없이 코드를 보기 좋게 넣는 방법을 살펴봤습니다. 안타까운 점은 Alex Gorbatchev가 2011년을 끝으로 소스코드 업데이트를 더 이상 하지 않고 있습니다. 부디 스크립트에서 에러가 나지 않길 바랍니다.
'일상' 카테고리의 다른 글
| 오늘의 구글 두들 - 존 핸콕 센터와 파즐러 칸 (0) | 2017.04.04 |
|---|---|
| 디덕터블이 뭔가요 먹는 건가요? 미국 의료 보험 용어 설명 (825) | 2017.04.03 |
| 티스토리 사이트맵 생성 (0) | 2017.04.01 |
| SSN 카드 재발급 (0) | 2017.03.31 |
| 번호이동 행사 덕분에 통신요금 할인 (0) | 2014.02.21 |
