티스토리 블로그에 SyntaxHighlighter 3.0.83 설치하기

티스토리 블로그에 SyntaxHighlighter 3.0.83 설치하기

syntaxhighlighter_3.0.83.zip

우선 위 링크의 파일을 받아 압축을 풉니다.

1. 파일 업로드

우선 위에 올린 파일을 받아 압축을 푼 후 "스킨편집 -> HTML편집 -> 파일 업로드" 으로 가서 

"script" 폴더와 "styles"폴더의 모든 파일을 업로드 해 줍니다.

2. HTML 수정

"스킨편집 -> HTML편집  -> HTML"에서 </head>바로 위에 아래 코드를 넣어주고 저장합니다.

<!-- SyntaxHighlighter 설정 시작-->
<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>
<!-- SyntaxHighlighter 설정 끝-->
<!-- SyntaxHighlighter 스크롤 안보이기 코드 시작 -->
<style>
.syntaxhighlighter {
  overflow: hidden !important;
}
</style>
<!-- SyntaxHighlighter 스크롤 안보이기 코드 끝 -->

3. 사용법

글 작성시 HTML에 체크 후

여기는 코드내용입니다.

#include<stdio.h>       

        

int main()                   

{                               

printf("Hello World!");

return 0;                      

}                               

</pre>                        

                

위 스크립트의 </pre> 위에 코드를 적어주시면 아래처럼 코드에 컬러가 입혀져서 나오게 됩니다.

참고 URL : http://alexgorbatchev.com/SyntaxHighlighter/

제 블로그의 내용이 도움이 되셨나요?

여러분의 공감과 댓글이 큰 힘이됩니다 :)

▼▼▼▼▼▼▼▼▼▼▼