티스토리 구문 강조(Syntax Highlighting) 적용

개발자에게 검색 엔진을 통해서 정보를 찾는 "구글링"은 매뉴얼이나 전문가의 조언을 대체하는 수준으로 오류에 대한 대처 방법이나 코딩 방법을 최신의 방법으로 얻을 수 있는 좋은 창구입니다. 검색 결과를 보다보면 위의 그림과 같은 적절한 소스 코드 샘플을 만나는 것이 최선의 안내인 경우가 많습니다. 그렇지만 소스 코드를 블로그 포스팅에 첨부할 때 마다 라인번호를 붙이고 키워드와 같은 문법 요소에 색깔을 입히는 작업을 하는 것은 너무나도 비효율적인 작업이고 차마 권할 수도 없는 과정입니다. 통상 이런 과정은 블로거는 단순하게 코드만 첨부하고 첨부한 코드가 어떤 프로그래밍 언어인지를 표시해두면 별도의 도구가 자바 스크립트와 CSS를 통해서 자동적으로 구문을 강조해서 표시하는 방식으로 작업을 처리합니다. 본 포스팅에서는 SyntaxHighlighter라는 도구를 사용하겠습니다. 우선 티스토리에서 글쓰기할 때 소스코드를 입력하는 과정을 먼저 살펴보겠습니다.

 

티스토리에서 소스코드를 입력하거나 편집할 경우에는 일반 편집창이 아닌 HTML 편집 상태에서 작업을 해야 소스 코드에 대한 구문 강조(Syntax Highlighting)를 적절하게 입력할 수 있을 뿐만아니라 소스 코드에 대한 손상을 입히지 않는 방법입니다. HTML 편집 상태와 일반 편집 상태간 전환은 편집창 우측 상단의 "HTML" 체크 박스를 클릭하면 됩니다.

HTML 편집 상태에서 원하는 위치에 <pre class="brush:....">소스코드</pre>와 같은 방식으로 소스 코드를 입력하고 저장하면 페이지가 보여지는 과정에 자바스크립트와 CSS로 이루어진 SyntaxHighlighter라는 도구를 통해서 자동적으로 구문 강조가 이루어지는 것입니다. 물론 SyntaxHighlighter라는 도구를 설치해야 합니다. 아래에서 설치 과정을 다루겠습니다. 필자의 경우에는 코드 삽입 위치를 일반 편집 상태에서 "@@@"으로 마킹해 놓으면 HTML 편집창으로 가면 <p><span>....</span></p> 블럭으로 표시되므로 해당 위치에 <pre class="brush:....">소스코드</pre> 블럭을 대체하는 방식으로 사용합니다. HTML 모드에서는 어디에 삽입해야 되는지 혼란이 있기 때문입니다. c#, vb, php등 프로그래밍 언어의 종류는 위의 예제와 같이 pre>태그의 brush: 다음에 입력합니다.

■ SyntaxHighlighter 설치하기

글쓰기 시점에 <pre> 태그를 사용하여 입력한 소스코드가 구문 강조 상태로 보여지기 위해서는 SyntaxHighlighter를 설치해야 하는데 설치하지 않은 상태에서는 단순 블럭 형태로 보여집니다. 설치파일은 http://alexgorbatchev.com/SyntaxHighlighter/download/에서 다운로드 받을 수 있습니다. 

SyntaxHighlighter를 다운로드 받아 압축을 해제하면 위의 그림과 같은 폴더 구조를 확인할 수 있습니다. 위의 폴더 내용중에서 필요한 일부 파일만 티스토리로 업로드하면 무난하게 SyntaxHighlighter를 티스토리에 설치할 수 있습니다.

티스토리 관리>HTML/CSS 편집 메뉴를 선택하고 상단의 "파일 업로드" 탭을 클릭해서 위의 그림과 같은 파일들을 "+추가" 버튼을 통해서 선택하여 등록합니다. 확장자가 *.js인 파일은 다운로드 받은 폴더의 scripts 디렉토리에서 *.css 파일들은 styles 디렉토리에서 선택하면 됩니다. shBrush로 시작하는 프로그래밍 언어별 파일은 필요한 것만 선택해도 되지만 나머지 파일은 필수 파일이므로 꼭 업로드 하셔야 합니다.

필요한 파일의 업로드가 끝나면 상단의 "HTML" 탭을 클릭해서 스킨 파일을 열고 위의 그림과 같이 업로드한 파일들을 페이지 로딩 시점에 적용하도록 추가합니다. "*.js", "*.css"파일 모두 src=""이나 href=""로 지정하는 경로가 "./images/"로 시작하는 것에 주의합니다.

스킨 파일의 맨 하단부에 있는 스크립트 블럭 내에 위의 그림과 같이 SyntaxHighlighter를 적용하는 코드를 삽입하면 구문 강조 표시를 위한 모든 작업은 끝납니다. "SyntaxHighlighter.config."로 기술한 부분은 SyntaxHighlighter의 동작 환경을 설정하는 것으로 기본 표시 형태를 변경할 경우 사용합니다. 자세한 내용은 http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/에서 확인할 수 있습니다.

스킨을 저장하면 블로그 페이지로 돌아가서 "새로고침"으로 결과를 확인하면 됩니다.