개발관련 블로그를 돌아다니다 보면 아래와 같이 이쁘게 소스코드가 있는 블로그들이 있다.

 사실 이러한 기능때문에 티스토리 블로그를 많이 쓰는게 아닐까 생각이 든다. 

 약간 번거롭긴 하지만 블로그를 이쁘게 꾸미기 위해서 소스코드 넣는 기능을 사용해보자!

소스코드를 그냥 붙여 넣는 것보다 읽기 편하고 보기에도 좋다.


1. SyntaxHighlighter파일 다운받기

 아래 홈페이지에 접속하여 현재(2013.12.19) 최신버전인 syntaxhighlighter_3.0.83.zip 파일을 다운받는다.
 → 다운로드 하기


2. 다운받은 파일을 임의의 폴더에 압축해제하기

 압축을 해제하면 scripts 폴더와 styles 폴더가 있을것이다.


3. 티스토리 관리자 페이지에 접속

 관리자 페이지 좌측메뉴 -> HTML/CSS편집 -> 파일업로드


4. 필요한 파일을 추가하기

 추가 버튼을 눌러 파일을 추가한다.
 scripts 폴더shCore.js 파일, styles 폴더shCore.css, shThemeDefault.css 파일은 기본적으로 꼭 추가해줘야 하는 파일이다.

 그리고 scripts폴더에서 모든 파일을 추가해도 상관은 없지만, 주로 사용하는 언어에 대한 파일만 추가해주도록 한다.
 shBrush뒤에 붙은 이름을 보고 필요한 언어만 추가를 해준다.

Ex) shBrushJava -> java언어
      shBrushJScript -> javascript언어

 styles 폴더에 있는 css파일들은 소스코드 창의 테마를 바꿀때 사용하는듯 한데, 테마를 바꾸고 싶다면 나중에 추가해서 테마를 변경해 줄수 있다.


5. 메뉴에 적용하기

 올려진 파일들을 skin.html에 적용해야한다.
 상단의 HTML/CSS 버튼을 누른 후 skin.html에서 </head> 위 줄에 코드를 추가하여야 한다. 내가 추가한 파일에 대한 코드만 추가하면 된다.

 아래의 소스중 필요한 소스만 골라서 넣는다. 다 넣어도 상관은 없다.

<script src="./images/shCore.js" type="text/javascript"></script>

<script src="./images/shBrushBash.js" type="text/javascript"></script>

<script src="./images/shBrushCpp.js" type="text/javascript"></script>

<script src="./images/shBrushCSharp.js" type="text/javascript"></script>

<script src="./images/shBrushCss.js" type="text/javascript"></script>

<script src="./images/shBrushDelphi.js" type="text/javascript"></script>

<script src="./images/shBrushDiff.js" type="text/javascript"></script>

<script src="./images/shBrushGroovy.js" type="text/javascript"></script>

<script src="./images/shBrushJava.js" type="text/javascript"></script>

<script src="./images/shBrushJScript.js" type="text/javascript"></script>

<script src="./images/shBrushPhp.js" type="text/javascript"></script>

<script src="./images/shBrushPlain.js" type="text/javascript"></script>

<script src="./images/shBrushPython.js" type="text/javascript"></script>

<script src="./images/shBrushRuby.js" type="text/javascript"></script>

<script src="./images/shBrushScala.js" type="text/javascript"></script>

<script src="./images/shBrushSql.js" type="text/javascript"></script>

<script src="./images/shBrushVb.js" type="text/javascript"></script>

<script src="./images/shBrushXml.js" type="text/javascript"></script>

<link href="./images/shCore.css" type="text/css" rel="stylesheet"><link href="./images/shThemeDefault.css" type="text/css" rel="stylesheet">

<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf'; SyntaxHighlighter.all();</script>


6. 저장후 완료?? -> 에러

 저장을 누르면 끝난다!! 이제 한번 사용해보도록 하자
 글쓰기에서 HTML을 체크하고 내용을 적으면 된다.
 C언어 소스를 올려보았다. 사용법은 다음과 같다.

 <pre class ="brush:사용할 언어">
 소스코드
 </pre>



#include 

void main() {
	printf("소스 코드 입력 완료! \n");
}

??? 
맨 끝에 </stdio.h> 라는게 붙었다.. 왜일까?

HTML에서 '<'기호가 충돌하기 때문에 나온다고 한다 해결하기 위해서는 < 대신 &lt; > 대신 &gt;를 입력해준다.

<pre class="brush:c"> #include &lt;stdio.h&gt; void main() { printf("소스 코드 입력 완료! \n"); } </pre>


#include <stdio.h>

void main() {
	printf("소스 코드 입력 완료! \n");
}

 </stdio.h>가 사라졌다!! 

번거로운 작업이긴 하지만.. 이제 소스를 편하게 볼 수 있다.


+ Recent posts