소스 코드 구문강조 SyntaxHighlighter 3.0 업그레이드

블로그 같은 웹사이트에서 소스 코드의 구문 강조를 쉽게 사용할 수 있는 SyntaxHighlighter가 3.0으로 업그레이드 되었습니다. Syntax Highlighter 3.0설치 방법은 블로그에 소스 코드를 보기 좋게 넣기 - SyntaxHighlighter 3.0.83을 참고하세요.

 

SyntaxHighlighter 3.0 새로운 점

• 클립보드로 복사
  전에는 소스를 복사할 때 플래시를 이용해서 복사했는데, 이제는 플래시를 사용하지 않고 복사할 수 있습니다. 툴바가 없어진 대신, 소스에서 마우스 더블클릭을 하면 소스가 선택되고 Ctrl + C를 눌러서 복사할 수 있습니다.
• 소스 선택
  2.0으로 버전업 되면서 가장 불만이었던 것 중 하나였는데요.
  소스 일부만 선택해서 복사하면 줄번호가 함께 복사되는 문제가 수정되었습니다.
• 제목 지정
  소스 코드의 제일 위쪽에 제목을 넣을 수 있습니다.
  <pre class="brush : html" title="제목">
• CommonJS와 호환된다는 데 이건 무슨 말인지 모르겠네요.
• CSS 지원
  Theme 파일에서 다른 클래스를 지정해서 CSS를 지원하는 군요..
  또, 문서의 Style 부분에 지정된 클래스를 구문 강조 내에서도 사용할 수 있게 됐네요. 이거 원래 있던 기능인가요? http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/class-name.html

위가 2.0 아래가 3.0입니다. 제일 눈에 띄는 건 툴바가 없어진 거지요.

한가지 불만은 소스가 길어지면 전에는 줄 바꿈이 됐었는데, 이제는 줄 바꿈이 되지 않고 아래에 스크롤바가 생겨버립니다. CSS에서 white-space를 수정하려고 했는데, 줄번호와 소스 나오는 줄이 완전히 별개여서 소스는 줄 바꿈을 해도 줄번호는 그것을 인식하지 못하고 다음 줄 번호가 나오는 문제가 있네요. 혹시 이거 해결하시는 분은 방법 좀 가르쳐 주세요. 그리고 shAutoloader.js 라는 파일이 있는데 이건 어떻게 사용하는 건지 아시는 분도 도움 부탁드립니다. 블로그에 소스 코드를 보기 좋게 넣기 - SyntaxHighlighter 3.0.83에 shAutoloader.js 파일을 이용하는 방법을 올렸습니다.

 

관련글

블로그에 소스 코드를 보기 좋게 넣기 - SyntaxHighlighter 3.0.83
Autoit syntax script for Google Code Syntax Highlighter
Aoogle SyntaxHighlighter용 AutoIt 구문강조 파일 두번째
Google Code Syntax Highlighter 도우미(Helper)
Syntax Highlighter 2.0 도우미