아무래도 전공이 전공이다보니 소스 코드를 올려야 할 때가 많은데 일일히 소스코드에 색상을 지정하는건 이미 나와있는 구문 강조 플러그인에 대한 예의도 아니거니와 시간도 아깝거니 해서 Syntax  Highlighter를 찾아봤습니다.
검색해보셨다면 아시겠지만 다 비슷비슷하고, 쓸데 없는 파일까지 다 올리는 식이라 딱 필요한 부분만 쓰려고 포스팅해봅니다.

Part1_환경 구성하기

우선 구글의 Syntax highlighter pretty를 아래의 링크를 통해 다운로드 받아서 쓰기 편하신 곳에 압축을 풀어주세요.

Google code pretty

파일 두개가 보이실텐데 옆의 설명대로 위에 있는 파일은 테스트 파일과 설명이 포함되어 있고, 아래쪽은 필요한 자바스크립트 파일과 스타일시트 파일만 포함되어 있습니다.


각 언어에 대한 테스트 코드나 문서를 보고 싶으시면 위의 파일을, 그냥 티스토리에 적용만 하실거라면 아래쪽 파일을 받으시면 됩니다.


※ 참고로 .js, .css 파일은 위의 파일은 src 폴더 내에 있고, 아래의 파일은 바로 있습니다.


압축을 다 푸셨으면 티스토리에서 관리자 >> 스킨 >> HTML/CSS 편집 페이지로 갑니다. 
 


그럼 블로그 스킨적용을 위한 html 파일과 css파일의 내용이 보이실겁니다.

여기서 css 부분은 손을 안대셔도 되구요. html파일만 Syntax highlighter를 사용할 수 있게 편집해 봅시다.
 

<head>...<link href="./images/pretiffy.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="./images/prettify.js"></script>...</head>

위처럼 <head> 와 </head> 사이에 위의 구문을 넣어줍니다. 저는 아래와 같이 넣었습니다.
 


그리고 head가 끝나는 </head>뒤에  <body> 태그 안에 onload="prettyPrint()"를 추가해 줍니다.
저는 body 태그 안에 속성이 아무것도 없어서 <body onload="prettyPrint()"> 요렇게만 하면 되는데 혹시 적용된 이벤트가 있다면 그냥 저부분을 안에다가 추가만 해주시면 됩니다.


자 그럼 html 파일에서의 작업은 끝이 났구요. 페이지 이동하기 전에 [저장] 버튼 눌러서 저장 하신 후
"파일 업로드" 탭으로 이동해 주세요.



그럼 옆에 파일 업로드 버튼이 보이실겁니다. 그걸 누르셔서 처음에 다운로드 받았던 파일 중에 아래 그림에 보이는 두개의 파일을 선택 해 주세요. 아래 보이는 두개만 해주시면 되요.

※ 참고 : C/C++, Java, HTML, CSS 이 네개는 다른 js 파일을 포함하지 않아도 기본적으로 사용할 수 있습니다. 쓰시는 언어가 js 파일로 따로 작성되어 있다면 그 파일을 추가해 주세요.  (다른 언어는 따로 테스트를 안해봐서, 저 네개가 된다는 정도만 확인해 봤습니다.) 



Part2_글쓰기

업로드까지 완료했으면 소스코드를 글에 넣을 준비가 다 되었습니다. 소스코드를 넣어보도록 할까요?
글쓰기에서 HTML 에 체크하셔서(이건 체크하지마시구요) HTML 편집모드로 전환합니다.

우선 형식은 아래와 같습니다.
<pre class="prettyprint" id="언어">
<!-- 소스 코드 부분 -->
</pre>

<pre class="prettyprint linenums" id="언어">
<!-- 라인 번호 표시옵션 추가 -->
</pre> 

언어에는 적용할 언어를 쓰시면 됩니다 c나 c++은 c, 자바는 java 이렇게 영어로 써주시면 됩니다. 아까 말씀 드렸던 것처럼 쓰시는 언어가 따로 js 파일이 작성되어있다면 해당 파일도 같이 업로드 해주시기 바랍니다.


마지막으로 아래는 java 작성 예제입니다. 언제나 익숙한 Hello 출력하기 입니다 :D

public class Hello{
      public static void main(String[] args){
            System.out.println("Hello nnoco!");
      }
}


public class Hello{
      public static void main(String[] args){
            System.out.println("Hello nnoco!");
      }
}


※ 참고1 : 라인번호가 추가되어 있어도 소스를 복사할 때는 라인번호는 포함되지 않습니다.

※ 참고2 : 테스트 해보시면 여러분과 제 소스코드 부분의 색상이 다를겁니다. 파일 업로드시 첨부한 prettify.css파일에는 각 구문 별로 색상이 지정되어 있습니다. 이를 고치시면 원하는 색상으로 바꾸실 수 있습니다.
첨부로 제 css 파일 올려두겠습니다. 
 



두런두런. 그나저나 적고보니 심플하지 않네요. 처음엔 그냥 다른 분이 올린거 쓰려다가 "아이"님이 수정하신 pretty를 쓰려고 했는데 막상하려니 마음대로 안되네요. 아이님 pretty는 훨씬 편하게 잘 되어있네요. 혹시 모르니 참고해 보세요.
아이님 블로그 
http://theeye.pe.kr 

'Tistory' 카테고리의 다른 글

[티스토리] 심플하게 Syntax Highlighter 적용하기  (0) 2011.08.26

+ Recent posts