SyntaxHighlighter

코딩하다 모르는 것이 있으면 구글링을 통하여 나보다 먼저 문제를 접하신 선행자님들의 블로그 등에서 코드를 참고하여 해결을 많이 하곤한다.

이 때 블로그에서 나열된 소스 코드들은 SyntaxHighlighter 등을 이용하여 보기 좋게 기술이 되어있다.

그래서 나도 SyntaxHighlighter를 블로그에 적용하고자 했다. 

가장 보편적인 방법은 해당 라이브러리를 다운받아 서버에 올려놓고 링크를 걸어 놓는 것이어서 그렇게 하려고 했으나 

그냥 SyntaxHighlighter 측에서 서버에 올려놓은 주소를 사용하고자 하였다. 

그러나 정상적으로 동작을 하지 않아 여러 블로그를 찾아 적용을 해보고 설정값도 변경해보아도 제대로 보이지 않았다. 

로그를 살펴보니 에러가 존재하여 에러 내용을 해결하여도 정상적으로 적용이 되지 않았다. 

설마설마 하였지만 역시나 Blogger에 기적용된 소스와 충돌이 발생하여 정상동작하지 않은듯하다.

Blogger의 템플릿을 '동적뷰'가 아닌 '기본뷰'로 바꾸지 정상동작 하였다.

소스가 복잡하여 '동적뷰' 상태에서 어느 부분으로 인하여 동작하지 않는지는 분석하지 못하여서 그냥 '동적뷰'는 못쓰는걸로. ㅡㅡ;

그리고 dragonraja2010 님의 블로그를 참고하였는데 이분의 코드에는 에러가 있었다.

아래 두 코드는

shCore.js 파일 내에서 정의되는 SyntaxHighlighter 객체를 사용하므로 shCore.js 파일보다 이후에 링크가 되어야 하지만 제일 먼저 나열되어 있어서 오류가 발생하였다. 

두 소스에 대해서 설명해주기 위해서 처음에 나열하신듯 한데 나같은 사람은 정확히 알려주지 않으면 잘 모른다. ㅎㅎ

그리고 세로 높이의 크기가 코드의 길이에 맞춰 자동으로 조절되나 불필요한 스크롤바가 생성되어 아래의 CSS 코드를 추가하여 해결하였다.

.syntaxhighlighter {    
    padding: 5px 0;
}

// PS - 2013.03.19
모바일 Blogger 앱을 통해 봤을때는 SyntaxHighlighter가 정상적으로 동작하지 안는것을 확인하였다.

웹 페이지 모드로 띄우면 그때는 정상적으로 동작한다.

이는 모바일 모드일때와 웹 페이지 모드일때 다른 헤더 정보를 사용하기 때문으로 생각된다.

나중에 더 분석해 봐야겠다.