티스토리 소스코드 입력  ( SyntaxHighlight )

티스토리 소스코드를 입력하고 싶은데 일반 TEXT 로 입력하자니 코드가 잘리거나 정렬이 제대로 안될 때가 많다.

이럴 때 SyntaxHighlight 를 이용하면 되는데 파일을 다운받아서 설치해라, 업로드 해라 등 어렵게 설명이 되어 있다.

간단하게 링크만 걸어도 사용할 수 있는데 말이다!

이제는 간단하게 따라만 해도 소스코드를 깔끔하게 작성할 수 있어요!

1. 블로그 관리에서 HTML/CSS 편집을 클릭하세요.

2. HTML 이 보이는 곳에서 <meta> 태그 밑에 아래 코드를 입력해주세요. ( 세팅끝! )

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"         type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"     type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"    type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js"     type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"    type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"     type="text/javascript"></script>

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"         rel="stylesheet" type="text/css">
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">


<script type="text/javascript">
SyntaxHighlighter.all();
</script>

3. 사용하기!

이제 준비가 완료되었으니 사용해봐야 겠죠?

사용할 때도 간단합니다.

우측상단에 HTML 에 체크를 한 후 원하는 소스코드를 입력합니다.

단, 아래 pre 태그를 붙이고요!

<pre class="brush:sql">
	GRANT SELECT ON [TABLE NAME] TO [USER];
	GRANT INSERT ON [TABLE NAME] TO [USER];
	GRANT DELETE ON [TABLE NAME] TO [USER];
	GRANT UPDATE ON [TABLE NAME] TO [USER];
</pre>

여기서 "brush:sql" 에서 sql 은 아래 매뉴얼에서 보고 원하는 소스코드의 형식으로 붙여넣으면 돼요!

java 소스 = java

css 소스 = css 

c++ 소스 = cpp 

속성값은 이렇게 넣어주면 되겠죠?

이상으로 오픈소스인 Syntaxhightlight 를 이용하여 소스코드를 입력하는 방법을 알아봤습니다.

읽어주셔서 감사합니다.