티스토리에 Syntax Highlighter 설치하기

1. 우선 관련 파일들을 다운 받습니다.. 다은받는 주소는 여기를 누르시면 됩니다.

[그림 1. 다운로드]

2. 압축을 풀면 3개의 폴더와 각 각 1개씩의 텍스트와 HTML파일이 보입니다. 여기서 "scripts"폴더에 들어가 보면 여러 js파일이 보이는대 자신에게 필요한 파일만 사용하도록 합니다. js파일을 다 올릴경우 페이지 로딩 시간이 길어지는일이 발생 할 수 있기 때문에 필요한 파일만 올리도록 합니다.

파일을 올리는 방법은 "스킨 → HTML/CSS 편집"에서 파일 업로드를 누르시거나 "스킨 → 스킨 선택"에서 파일 업로드를 누르면 파일을 올리실 수 있습니다. 파일을 올릴때는 한번에 여러파일을 업로드 가능하기 때문에 모두 선택 하시거나 사용하실 js파일만 선택하셔서 올리시면 됩니다.

"scripts"폴더에 js파일을 올리고 "styles"폴더에 모든 파일을 업로드 합니다. 이렇게 파일을 올리고 파일 리스트를 다시 확인해 보면 "/images"폴더에 들어가 있는걸 확인하실 수 있습니다. 티스토리는 사용자가 업로드 하는 파일을 모두 /images폴더에 저장하게 됩니다. 저는 js파일중 다음에 파일들만 업로드 했습니다.

기본적으로 들어갈 clipboard.swf, Core.js, Legacy.js파일

각 언어를 담당하는 shBrushCpp.js(이하 shBrush*.js 생략), CSharp, Java, JScript, Sql, Vb, Xml.js파일 입니다.

[그림 2. 업로드 파일]

3. 업로드 후 업로드한 파일을 적용하기 위해 스킨파일을 수정해야 합니다. 스킨편집으로 들어가 </head>태그 위에 다음에 코드를 삽입 하는데 모든 js파일을 올리셨다면 모든 파일을, 저같이 일부 파일만 올리셨다면 일부 파일을 다음과 같이 삽입합니다.

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

<script type="text/javascript" src="./images/shLegacy.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/shBrushJava.js"></script>

<script type="text/javascript" src="./images/shBrushJscript.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">

dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';

dp.SyntaxHighlighter.HighlightAll('code');

SyntaxHighlighter.all();

</script>

4. 이제 적용해야할 단계 입니다. 스킨을 저장하고 글을 쓰는대 그냥 쓰면 되는게 아니라 글쓰기 기능중 HTML기능으로 글을 써야 합니다.

[그림 3. HTML편집]

HTML편집 모드에서 <pre>태그로 Syntax Highlighter를 사용하게 됩니다.

<pre class="brush: csharp"> CODE </pre>

[표 1. pre]

[그림 4. HTML편집 모드에서 미리보기]

class부분에 brush: csharp이라고 되어 있는대 이 부분에 사용할 목적 언어와 매칭된 (업로드한)js파일을 선언해 줘야 합니다. 각 언어와 js파일에 매칭은 여기를 누르시면 확인하실 수 있습니다.

그리고 이 부분은 Syntax Highlighter가 적용된 부분 입니다.

private void ~
{
	B.Text = MD5HashFunc(A.Text);
}

public string MD5HashFunc(string str)
{
	StringBuilder MD5Str = new StringBuilder();
	byte[] byteArr = Encoding.ASCII.GetBytes(str);
	byte[] resultArr = (new MD5CryptoServiceProvider()).ComputeHash(byteArr);

	for (int cnti = 1; cnti < resultArr.Length; cnti++)
	{
		MD5Str.Append(resultArr[cnti].ToString("X2"));
	}
	return MD5Str.ToString();
}