Syntax Highlighter 3.0을 Tistory에 적용하다.

역시 세상에 쉬운일이 별로 없다고

2.0이 설치된 곳에 overwrite 만 해서는 되질 않는다.

이번 글에서는 변경된 부분에 대해서만 설명하고자 한다.

 - 참조 : 2.0설치 관련 글(http://goo.gl/a1jAg) , Syntax Highlighter (http://goo.gl/wF2u)

추가해야 할 코드

---

• <textarea> 를 사용한 경우 script 기술했던 부분에 아래의 코드를 추가한다.

<script type="text/javascript" src="./images/shLegacy.js"></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 파일이다.

shCore.css

shThemeElflord.css

Style Test용 Sample code

---

#include <iostream> using namespace std; int main(int argc, char* argv[]) { // Comment 1 /* Comment 2 */ string test("hello World!"); int i = 10; i++; cout << __LINE__ << endl; return i; }