본문 바로가기

IT/블로그

Tistory 에 소스코드넣기

용소시 2015. 12. 8. 16:44

Tistory 에서 포스팅시 Syntax Highlighter 를 이용해서 소스코드를 이쁘게 넣는방법

1. 아래의 링크에서 syntax Highlight 를 다운로드받는다

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

2. tistory 관리페이지에서 [html/css 편집] 클릭후

파일업로드 메뉴로 이동

3. 1에서 다운로드한 파일의 압축을 푼뒤 [scripts] 폴더와 [styles] 폴더안의 전체 파일을 업로드시킵니다.

4.[html] 탭으로 이동후 <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();
</script>

5. body 에도 다음과같은 onload 이벤트시 Syntax Hightlighter 가 시작될수있게수정해줍니다

6. 글 작성시 html 에디트 모드에서 아래처럼 textarea 태그 안에 소스코드를 작성해주면됩니다.

티스토리툴바