티스토리에 소스코드 넣기(SyntaxHighlighter)

2014. 5. 26. 13:372018년 이전 관심사/개발환경

반응형

티스토리에 Line Number가 있는 형태로 소스코드를 넣기 위해서는 Syntax Highlighter를 설치 해야 한다.


1. SyntaxHighlighter Download


http://alexgorbatchev.com/SyntaxHighlighter/download/



2. SyntaxHighlighter 설치


[관리자]-[HTML/CSS편집]-[파일업로드]-[추가]버튼 선택



추가 버튼 클릭 후, 조금 전에 다운로드 받은 SyntaxHighlighter 폴더 중, scripts와 styles 폴더 안에 있는 파일들을 티스토리 서버에 업로드 한다.



3. 티스토리 HTML/CSS 편집


skin.html의 내용 중, </head>를 검색 한 후, </head> 위에 아래 script 들을 추가 한다.

<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();

</script>




위 과정을 마친 후, <body>를 검색해서 아래와 같이 수정한다. 아래와 같이 수정하면 textarea 태그를 본문에서 사용 할 수 있다.

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





4. SyntaxHighlighter 사용 방법

SyntaxHighlighter를 사용하는 방법은 두가지가 있다. 

1. <pre> 태그 이용

2. <textarea> 태그 이용


<pre> 태그는 일반적인 HTML 태그 코드와 중복되어 많이 불편하다. 때문에 <textarea> 태그를 사용하면 된다.

방법은 아래와 같다. 

1. 글 작성 시, 소스 코드를 써야 하는 일이 생기면, HTML 에디터 타입으로 변경한다.

2. 변경 후 다음과 같이 입력하면 Syntax Highlighter가 적용 된다.


<textarea name="code" class="brush:cpp;">

void main

{

   cout << "test"

}

</textarea>




반응형