- Today
- Total
내 머릿속 데이터베이스
SyntaxHighlighter 사용하기 편하도록 티스토리에 적용하기 본문
원본 출처 : 신규하 블로그(http://gyuha.tistory.com/405)
신규하님의 블로그에 있는 자료에 일부 몇가지 수정해서 보완해보았다.
이 방법이 가장 SyntaxHighlighter 편리하게 쓸 수 있는 방법이라고 생각된다.
다음 링크에서 SyntaxHighlighter 최신버전을 받는다. (http://alexgorbatchev.com/SyntaxHighlighter/download/)
다운받은 파일을 압축을 풀어 styles, scripts 폴더에 있는 파일들을 선택해서 티스토리에 모두 업로드한다.
그냥 올리면 알아서 images 디렉토리에 추가되는걸 볼 수 있다.
HTML/CSS편집에서 다음 코드를 <title> 태그 밑에 삽입한다.
기존 코드는 티스토리 내부 코드 변경에 따라 버그가 발생되어 개선된 버전을 새로 포스팅 했습니다.
탭도 지원하도록 수정했습니다 확인해보세요 ^^;
다음 글을 참조해 주세요.
[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 라고 쓰면 된다.
본 블로그에서 적용한 디자인은 다음과 같이 수정했다.
