[Tip] Tistory Syntax highlighter 적용하기 - 티스토리 코드 하이라이트, 신택스 하이라이트 적용




Syntax highlighter 기능을 이용하면 블로그에 글을 작성할 때 아래와 같은 효과를 줄 수 있습니다.




우선 아래의 압축파일을 다운받아 압축을 해제합니다.





 자바스크립트(js) 파일과 스타일(css) 파일 추가하기

블로그 관리 -> 스킨 -> Html/css 편집에서 자바스크립트(js) 파일과 스타일(css) 파일을 추가합니다.
위의 압축파일에 들어있는 scripts 폴더styles 폴더에 있는 모든 파일을 업로드 합니다.





 Html/css 편집하기

아래의 코드를 skin.html에 추가해줍니다.
</head> 태그 바로 위에 추가하라고들 하는데, 다른곳에 추가해도 별 이상은 없더군요.
하지만 기존 블로거들의 말을 따라 </head> 태그 위에 추가합니다.

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.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/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all(); 









 Syntax highlighter 사용하기

사용하는 방법은 두가지 입니다.

1. <pre> 태그

아래처럼 태그를 열고 닫으며 class엘리먼트를 추가해 줍니다.

<pre class="brush: java">

private void method(int flag)
{

}

</pre> 


엘리먼트 class"brush: 언어"에서 언어위치에 오는 단어에 따라 어떤 언어로 적용될지가 결정됩니다.

아래에서는 위의 코드를 html에서 작성했을때, java언어로 적용된 코드를 보여줍니다. 
(cpp, xml, js, java 등에 따라 각각 적용됩니다.)
private void method(int flag)
{

}


2. <textarea> 태그

아래처럼 태그를 열고 닫으며 name엘리먼트와 class엘리먼트를 추가해 줍니다.

<textarea name="code" class="xml">

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/intro_background"
    >

</LinearLayout>

</textarea>

name 엘리먼트는 위의 textarea 태그가 어떤 area가 될지를 정해주는 역할을 해주고(여기서는 code라고 명명),
class 엘리먼트는 어떤 언어로 적용할지를 결정해주는 역할을 합니다.

아래는 xml 언어로 적용된 textarea 입니다.


이 두번째 방법인 textarea 태그를 사용하기 위해서는 아래의 태그를 skin.html의 body 태그에 추가해야합니다.

Onload="dp.SyntaxHighlighter.HighlightAll('code');"








제 개인적으로는 textarea를 사용하고 있습니다.
티스토리에서 글 작성 중 편집화면에서 pre태그와 textarea태그는 보여지는게 다르기 때문입니다.


 

 
 

 
- pre 태그 사용시 -
편집 중 화면(위)
보여지는 화면(아래)


 

 
 

 
- textarea 태그 사용시 -
편집 중 화면(위)
보여지는 화면(아래)



보시는것과 같이 textarea 태그는 텍스트 박스안에 코드를 넣어주어 편집하기 편하도록 해줍니다.
사용하시는 편의에 따라 pre 태그와 textarea 태그 중 선택해서 사용하시면 됩니다.





Posted by croute

댓글을 달아 주세요

  1. Favicon of http://qmwneb.tistory.com BlogIcon 브주듀 2011.03.06 19:33 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리에 적용했는데 왼쪽에 있는 숫자들만 보입니다..
    1
    1
    1
    2
    1
    3
    1-
    4
    이런식으로요..