Syntax highlighter 기능을 이용하면 블로그에 글을 작성할 때 아래와 같은 효과를 줄 수 있습니다.
우선 아래의 압축파일을 다운받아 압축을 해제합니다.
syntaxhighlighter.zip| 자바스크립트(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)
{
}
|
엘리먼트 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>
|
name 엘리먼트는 위의 textarea 태그가 어떤 area가 될지를 정해주는 역할을 해주고(여기서는 code라고 명명),
class 엘리먼트는 어떤 언어로 적용할지를 결정해주는 역할을 합니다.
아래는 xml 언어로 적용된 textarea 입니다.
이 두번째 방법인 textarea 태그를 사용하기 위해서는 아래의 태그를 skin.html의 body 태그에 추가해야합니다.
Onload="dp.SyntaxHighlighter.HighlightAll('code');"
제 개인적으로는 textarea를 사용하고 있습니다.
티스토리에서 글 작성 중 편집화면에서 pre태그와 textarea태그는 보여지는게 다르기 때문입니다.
| |
| |
- pre 태그 사용시 -
편집 중 화면(위)
보여지는 화면(아래)
| |
| |
- textarea 태그 사용시 -
편집 중 화면(위)
보여지는 화면(아래)
보시는것과 같이 textarea 태그는 텍스트 박스안에 코드를 넣어주어 편집하기 편하도록 해줍니다.
사용하시는 편의에 따라 pre 태그와 textarea 태그 중 선택해서 사용하시면 됩니다.
