본문 바로가기
Programming

Syntax Highlighter 3.0을 Tistory에 적용하다.

by leanu 2011. 1. 12.
역시 세상에 쉬운일이 별로 없다고
2.0이 설치된 곳에 overwrite 만 해서는 되질 않는다.
이번 글에서는 변경된 부분에 대해서만 설명하고자 한다.
 - 참조 : 2.0설치 관련 글(http://goo.gl/a1jAg) , Syntax Highlighter (http://goo.gl/wF2u)


추가해야 할 코드

  • <textarea> 를 사용한 경우 script 기술했던 부분에 아래의 코드를 추가한다.
  • Scroll bar 없애기 : 본인이 주로 사용하는 chrome 에서는 모든 창에 vertical scroll bar 가 등장하였고, 세로로 넘어가는 녀석에 대해서는 horizental scroll bar님도 등장하셨다. 아주 보기가 싫어서 shCore.css 부분을 손을 보았다. 차후에 코드 길이가 긴 녀석의 경우 깨질수도 있으니 주의를 요한다.
    • 수정부분은 ".syntaxhighlighter" 녀석의 overflow 속성이다. 이를 auto -> hidden으로 바꾸었다.

SH가 3.0으로 버전업되면서 맘에 든 점 2가지

  1. 소스코드를 드래그 할때 라인번호가 포함되지 않는 소스 고유영역만 선택이 된다.
  2. 테마의 색상부분을 분리하여서 수정하기가 용이하다.
2.0 쓰면서 가장 아쉬웠던 부분이 이번에 멋지게 개선되어 돌아왔다. 테마도 내가 주로 사용하는 vim 의 elflord 색상과 유사하게 바꿨더니 코드 내용들이 전보다 더 친숙해 보인다. 

첨부된 파일은 스크롤바 제거가 추가된 scCore.css파일과 개인적으로 변경한 theme css 파일이다.


Style Test용 Sample code



댓글