티스토리에 소스코드를 예쁘게 해보자!

1. SyntaxHighligher 다운 받기

syntaxhighlighter_3.0.83.zip

↓공식홈페이지에서 다운 받으셔도 됩니다↓

http://alexgorbatchev.com/SyntaxHighlighter/

2. 다운 받은 폴더 압축풀어 넣기!

script, styles 폴더의 파일들을 이제 티스토리 스킨 부분에 업로드 시켜줄 차례 입니다!

1) 블로그 관리를 들어가서 꾸미기로 갑니다!

2) 스킨편집을 가시면 아래 사진과 같이 스킨 편집이 나옵니다.

   바로 아래에 HTML 편집을 누릅니다.

3) 아래와 같이 창이 바뀌면 파일업로드를 가셔서 아래 추가를 누르시고

  아까 다운로드 받은 폴더에서 script, style 폴더 안의 파일들을 모두 업로드 시켜줍니다.

3. 이제는 소스 업로드 차례입니다!

1) 파일업로드 창 왼쪽 부분에 HTML 창에 소스를 올립니다.

    소스는 아래에 있습니다!

2) 설정할 소스들 입니다!

   소스의 위치

      CSS 링크 부분이라고 되어 있는 소스는 <title> 아래 부분 혹은 <link> 라고 되어 있는 부분 아래에 넣으시면 됩니다.
      스크립트 부분은 </head> 바로 위에 넣으시면 됩니다.

4. 이제 적용을 하시고 잘 나오는지 TEST 해봅니다!

아래와 같이 코드를 복사하셔서 잘 되는지 확인해봅니다.

  <pre class="brush:html">
    <link href="/TEST" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
      var link_src = "TEST"
    </script>
  </pre>

※ 코드를 입력 하는 방법

<pre class = "brush:언어">

<!-- 입력할 코드 -->

     <!-- 이렇게 입력하시면 됩니다 -->

</pre>    

※ 코드를 작성할 때 화살괄호 < > 이 두개가 표시가 안된다면,  &lt;   &gt; 이렇게 쓰면 됩니다.