본문 바로가기

일상/잡동사니

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

모아이모아이 2015. 9. 23. 11:29

1. 파일다운로드

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

2. 파일 설치

다운로드 받은 파일의 압축을 푼다.

압축을 풀면 다음과 같은 폴더를 볼 수 있다. scripts와 styles 폴더 내에 있는 파일들을 모두 업로드 해야한다.

관리자 -> HTML/CSS 편집 -> 파일업로드 -> 추가버튼

3. HTML 수정

관리자 -> HTML/CSS 편집 -> HTML

1) 헤더 부분 추가

</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>

2) 바디 부분 변경

<body> 태그 뒤에 다음을 추가한다.

 

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

4. 블로그 글 쓰기

이제 글을 쓰다가 중간쯔음에 소스코드를 넣고 싶으면 아래와 같이 하면 된다.

1) HTML 체크

2) 소스코드 넣기(넣을 때 내용을 아래 코드로 감싸준다)

 



소스코드

3) 여기서 넣을려고하는 코드에 따라 class의 brush란을 바꿔준다. 위의 경우 CPP 코드이다.

저작자표시

'일상 > 잡동사니' 카테고리의 다른 글

엑셀 실무 (0)	2016.05.08

티스토리툴바