Syntax Highlighter라고 해서 코드를 MSDN 형식으로 보여주는 멋진 녀석입니다!
사실 다른 곳에서 블로그를 하다가 Syntax Highlighter 때문에 티스토리로 옮기게 되었는데요.
저는 티스토리가 기본으로 지원해주는 줄 알았습니다. _-_

그래서 여차저차 Syntax Highlighter를 설치해봤습니다.
Syntax Highlighter는 자바스크립트로 업로드를 하고 특정 HTML 태그의 클래스를 사용하면 됩니다.

우선 다운로드 주소 입니다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

최신 버전을 다운 받으신 후에 압축을 풉니다.(저는 2.0.320 버전을 사용했습니다.)
아래 그림과 같이 scripts, src, styles 폴더가 있구요.
LPGLv3.txt, test.html 파일이 있습니다.

사용자 삽입 이미지
3개의 폴더는 Sytanx Highlighter가 돌아가기 위한 파일들이 존재하구요.
test.html은 테스트 샘플 페이지 입니다.
(LPGLv3.txt는 라이센스 파일이니 신경 끄시면 됩니다. - 심심하시면 읽어보셔도 되구요 - _-; )

우선 세개 폴더의 모든 파일들을 티스토리에 업로드 합니다!
관리 페이지에 스킨 -> 직접올리기를 통해 파일을 업로드 할 수 있습니다.
(업로드를 한 후에 완료 되었습니다! 같은 메세지 박스는 안 뜨더군요. _-_)


이제 티스토리에서 사용하기위해 자바스크립트 파일들을 연결합시다!
test.html 파일을 소스보기로 통해 <head></head> 사이에 있는 <script>와 <link> 태그 내용을만
티스토리에 추가해주시면 됩니다. 관리 페이지에 스킨 -> HTML/CSS 편집을 통해 skin.html에
<head></head> 사이에다가 test.html에서 복사해준 내용을 붙여넣어주면 됩니다.

자~ 이제 여기서 문제가 생기는데요 ㅠ
test.html은 세개의 폴더가 존재한다고 가정하고 js 파일과 css 파일을 연결하고 있습니다.
즉, 다음과 같이 상대경로를 설정하고 있습니다.
src="scripts/shBrushVb.js", href="styles/shCore.css"
티스토리에 업로드를 할때 폴더 단위가 아닌 파일들만 업로드가 되는데요.
이때 파일이 업로드되는 상대경로는 ./images 입니다! (이걸 몰라서 한참을 헤맸습니다. ㅠㅠ)
(드래한 부분이 상대경로를 수정하여 <head></head>사이에 들어간 내용입니다.
클릭해서 확대해서 보세요 ^^)

따라서 상대경로 위치를 수정해주시면 됩니다.
src="./images/shBrushVb.js", href="./images/shCore.css"

연결이 다 된후에는 이제 특정 태그를 통해 사용을 하시면 되는데요 +_+
test.html에 있는 코드를 통해 확인해보겠습니다.
<pre class="brush: c-sharp;">
function test() : String
{
 return 10;
}
</pre>

이 내용을 HTML 편집모드로 전환하여 붙여넣으면 짠~

function test() : String
{
	return 10;
}

이제 원하시는 소스코드를 깔끔하게 블로그에 올릴 수 있습니다~ ^^
◀ PREV | 1 | 2 | 3 | 4 | NEXT ▶

카테고리

분류 전체보기 (28)
주절주절 (15)
바라보기 (5)
구경하기 (4)
기억하기 (4)

최근에 받은 트랙백

달력

«   2019/08   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Total : 12,714
Today : 0 Yesterday : 0
Statistics Graph