항상 표에 대~~~충 구겨넣어서 보여주던 Code들...

정말 자세안나오는...^^;

 

그래서 준비했다.

 

Code Editor들에서 보여지던

Syntax에 따른 Highlight와

줄번호까지 친절히 보여주시는

SyntaxHighlighter를 적용시켜보자.

 

 

1. SyntaxHighlighter 모듈 다운로드

   http://alexgorbatchev.com/SyntaxHighlighter/download/

   Click here to download

 

 

2. 다운받은 파일(syntaxhighlighter_3.0.83.zip) (아무곳에나) 압축해제

 

 

3. Tistory HTML/CSS에 적용

 

 

3.1. 압축 해제한 파일 중 .js 와 .css 업로드

     → \scripts 폴더와 \styles 폴더에 있는 파일들 

     → 관리 - HTML/CSS 편집 - 파일업로드 메뉴에서 추가 버튼 클릭 후 업로드 

 

※ 기본으로 업로드 되어야 하는 .js 파일

 

shAutoloader.js

shCore.js

shLegacy.js

 

 

※ Highlight 시키고자 하는 언어와 관련된 .js 파일은 선택적으로 업로드

 

shBrushCpp.js

shBrushDelphi.js

shBrushJava.js

 

 

※ Code가 보여질 테마와 관련된 파일도 선택적으로 업로드

   → 테마 확인은 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

 

필자는 RDark를 선택했지만,

혹시나 다른 테마를 선택할 수도 있어서

1단은 테마는 전체 파일 모두 업로드

 

 

 

 

3.2. 글쓰기 HTML 수정

     → 관리 - HTML/CSS 편집 - HTML 메뉴에서 수정

 

3.2.1. </head> TAG 위에 <script>들 추가

 

※ 기본 .js 외에 선택적으로 업로드한 .js 에 해당하는 script들만 추가

 

3.2.2. <body> TAG에 Onload event 추가

 

 

 

 

4. 글쓰기에서 Code 넣어보기

 

HTML CheckBox에 Check 후

 

요롷게 TEXTAREA를 만들고

고 안에 원하는 Code를 적으면 된다. 

 

여기에서 중요한 것이

해당 언어를 정확히 기술해 주는 것이다.

 

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 에서

"Brush aliases" 에 있는 해당 언어를 적으면 된다.

 

위의 코드는

요롷게 표시되었다.

 

 

+ Recent posts