※ 이 문서는 뭐 그냥 하면 되지. ()에서 인쇄하였으며,
저작권은 해당 블로그 운영자에게 있습니다.

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

/Tip & Tech/블로그 :: 2010. 7. 5. 14:51

소스 코드 구문강조 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
SyntaxHighligter 2.0과 3.0 차이

위가 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 도우미

블로그의 글과 그림, 첨부파일의 복제, 재배포를 금지합니다. =>  자세히 보기
티스토리 초대장 필요하신 분은 댓글남겨주세요.
give start - 굿네이버스 - 사랑의 열매 - 아름다운재단 - 어린이재단 - 유니세프
굿네이버스 배너
사랑의 열매 배너
아름다운 재단 배너 어린이 재단 배너 유니세프 한국위원회 - 배너