Simulz :: (구문강조) 티스토리에 SyntaxHighlighter 3.0 적용하기

(구문강조) 티스토리에 SyntaxHighlighter 3.0 적용하기

PC&웹/정보&기술 : 2010/01/18 19:30

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

링크로 연결하기
항상 최신 버전의 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에 붙여넣으면 됩니다.

<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeSimulz.css"/>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.config.tagName  = 'textarea';
    SyntaxHighlighter.defaults['auto-links'] = false; 
    SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
    SyntaxHighlighter.all();
</script>

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

종류별로 서식으로 저장 후

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

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

CSS에서

HTML에서

'PC&웹 > 정보&기술' 카테고리의 다른 글

쓰기 편한 키보드 모음... (0)	2010/01/19
SyntaxHighlighter 구문강조 미리보기 (0)	2010/01/18
(구문강조) 티스토리에 SyntaxHighlighter 3.0 적용하기 (5)	2010/01/18
네이버 드래그&복사 방지 해제하기 (0)	2010/01/17
Windows7을 USB 메모리로 설치하는 쉬운 방법 (0)	2009/10/31
(드라이버) MIMO UM-750 for Windows 7 (6)	2009/08/12

Simulz Blog Page Counter
Visitors:

PageViews:

Posted by Simulz

syntaxhighlighter, 구문강조

Trackback(0) : Comment (5)

댓글을 달아 주세요

degi 2011/07/04 00:01 수정/삭제 댓글쓰기 댓글주소

님처럼 source viewer 부분을 만들려면 어찌하나요 ㅇㅅㅇ??
- Simulz 2011/07/04 22:31 수정/삭제 댓글주소
  
  구문강조 사이트를 방문하면 자세한 설명을 볼 수 있습니다.
- degi 2011/07/04 23:54 수정/삭제 댓글주소
  
  자세한 설명은 못찾겠네요 ㅁㄴㅇㄹ
  
  3.x 버전하고 2.x 하고 다른건가요??
- Simulz 2011/07/05 21:21 수정/삭제 댓글주소
  
  http://alexgorbatchev.com/SyntaxHighlighter/
  사이트 오른쪽에 메뉴가 있습니다. 설치, 설정 방법이 자세히 나와있습니다. 3.0을 적용해봤는데 버그가 있네요.
- degi 2011/07/06 00:17 수정/삭제 댓글주소
  
  http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/strings.html
  이거봐도 모르겠네요 ㅋㅋ;;;;
  적용이 안되는건가요 ㅁㄴㅇㄹ