티스토리 뷰

본문에 소스를 첨부할 때 텍스트로만 보여지던 것을
구문별로 강조하고
라인 번호를 추가하고
복사, 인쇄를 할 수 있도록 해줍니다.


링크로 연결하기
항상 최신 버전의 SyntaxHighlighter 서비스를 이용할 수 있습니다.

HTML/CSS 편집 페이지에서 HTML HEAD에 아래 소스를 추가합니다.
필요 없는 구문의 JS 파일은 삭제해도 됩니다.
구문별 JS 파일 보기
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes

CSS파일로 테마를 변경할 수 있습니다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes:Default


직접 설치하기
구문 강조할 항목을 추가하려면 JS 파일을 편집해서 업로드 하면 됩니다.
최신버전 내려받기
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

압축을 풀고 scripts, styles 폴더에 있는 파일을 업로드 합니다.


그 다음 위 소스에서 http://alexgorbatchev.com/pub/sh/current/scripts 경로를 ./images/로 변경한 다음 HTML에 붙여넣으면 됩니다.




사용하기
아래 코드를 HTML편집기에 붙여넣고 서식으로 저장하면 언제든지 꺼내쓸 수 있습니다. 스타일을 알맞게 편집하세요

종류별로 서식으로 저장 후


편집 중일 때는 다음과 같이 보입니다.



구글 애드센스 광고가 가려질 때
광고를 최상위로 보이도록 CSS를 편집하면 됩니다.

CSS에서

HTML에서
댓글
  • 프로필사진 Favicon of http://degi.wo.tc/ BlogIcon degi 님처럼 source viewer 부분을 만들려면 어찌하나요 ㅇㅅㅇ?? 2011.07.04 00:01
  • 프로필사진 Favicon of https://tsblog.simulz.kr BlogIcon ☠ Simulz 구문강조 사이트를 방문하면 자세한 설명을 볼 수 있습니다. 2011.07.04 22:31 신고
  • 프로필사진 Favicon of http://degi.wo.tc/ BlogIcon degi 자세한 설명은 못찾겠네요 ㅁㄴㅇㄹ

    3.x 버전하고 2.x 하고 다른건가요??
    2011.07.04 23:54
  • 프로필사진 Favicon of https://tsblog.simulz.kr BlogIcon ☠ Simulz http://alexgorbatchev.com/SyntaxHighlighter/
    사이트 오른쪽에 메뉴가 있습니다. 설치, 설정 방법이 자세히 나와있습니다. 3.0을 적용해봤는데 버그가 있네요.
    2011.07.05 21:21 신고
  • 프로필사진 Favicon of http://degi.wo.tc/ BlogIcon degi http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/strings.html
    이거봐도 모르겠네요 ㅋㅋ;;;;
    적용이 안되는건가요 ㅁㄴㅇㄹ
    2011.07.06 00:17
댓글쓰기 폼