SyntaxHighlighter 사용하기 편하도록 티스토리에 적용하기

원본 출처 : 신규하 블로그(http://gyuha.tistory.com/405)

신규하님의 블로그에 있는 자료에 일부 몇가지 수정해서 보완해보았다.

 

이 방법이 가장 SyntaxHighlighter 편리하게 쓸 수 있는 방법이라고 생각된다.

 

 

다음 링크에서 SyntaxHighlighter 최신버전을 받는다. (http://alexgorbatchev.com/SyntaxHighlighter/download/)

 

다운받은 파일을 압축을 풀어 styles, scripts 폴더에 있는 파일들을 선택해서 티스토리에 모두 업로드한다.

 

 

그냥 올리면 알아서 images 디렉토리에 추가되는걸 볼 수 있다.

 

HTML/CSS편집에서 다음 코드를 <title> 태그 밑에 삽입한다.

1 2 3 4

기존 코드는 티스토리 내부 코드 변경에 따라 버그가 발생되어 개선된 버전을 새로 포스팅 했습니다.    탭도 지원하도록 수정했습니다 확인해보세요 ^^; 다음 글을 참조해 주세요.

 

[Programming/Web Language] - SyntaxHighlighter 티스토리 적용 시 abp버그 수정 및 업그레이드

 

 

사용 방법은 글 쓰기 화면에서 인용구를 삽입한다.

 

 

입력된 인용구 영역에 원하는 소스코드를 붙여넣기 한 뒤에 HTML 보기 버튼을 누른다.

 

 

소스코드를 살펴보면 다음과 같은 코드로 시작되는 부분이 있다.

 

<BLOCKQUOTE class=tx-quote-tistory>

....

</BLOCKQUOTE>

 

이 코드를 다음과 같이 수정하고 다시 HTML 버튼을 눌러 돌아와서 작성하던 글을 마저 작성하면 된다.

 

<BLOCKQUOTE class=code:html>

....

</BLOCKQUOTE>

 

또는

<BLOCKQUOTE class=brush:html>

....

</BLOCKQUOTE>

 

 

html 코드가 아닌 C나 PHP를 쓰고 싶으면 code:php, code:c 라고 쓰면 된다.

 

본 블로그에서 적용한 디자인은 다음과 같이 수정했다.

 

접기

shCore.css 파일

35번째 라인에 line-height: 1.5em !important; 으로 수정

50번째 라인 font-size: 14px !important; 으로 수정

51번째에 letter-spacing:0px; 추가

 

shThemeDefault.css 파일

23번째 라인

.syntaxhighlighter .line.alt2 {    background-color: #f5f9fa !important; }

 

접기