[Tistory 꾸미기]소스코드 강조(SyntaxHighlighter) 사용하기

안녕하세요 리그캣 입니다.

오늘은 유저분이 코드를 SyntaxHighlighter로 이용하여 강조해보라고 조언을 해주셨는데요.

그러하여 SyntaxHighlighter에 대해서 알아 보는 시간을 갖고자 합니다. ㅎㅎㅎ

나는누구게? 님 정말 감사합니다 !!

http://alexgorbatchev.com/SyntaxHighlighter/

해당 사이트에 가게 되시면 다음과 같은 화면이 나옵니다.

해당화면에서 우측 부분을 봐봅시다.

개발자를 위해 기부도 할 수 있고, 사용자가 다운로드도 받을 수 있는것같아요

다운로드를 클릭해 봅시다.

깃 허브 에서 다운로드를 받을 수 있게 되어있는것 같네요.

Clone or download를 이용하여 zip 파일로 다운을 받아 봅시다.

압축을 풀어 보았더니 v4 버전인데 v4버전은.. 좀 저도 잘 모르겟네요..

ㅠㅠㅠ

그래서 위에꺼는 다시 무시하고!!

syntaxhighlighter_3.0.83.zip

출처-http://mclass.tistory.com/54

을 다운받아 주세요!!

다운받으시고 나서 압축을 풀어주세요

저희가 필요한 파일은 scripts와 styles 파일입니다.

scripts파일과 style 폴더를 티스토리 관리자 - > HTML/CSS 편집 파일업로드에 업로드를 합니다.

파일업로드 - > SCRIPTS 파일 전체선택하셔서 올려 놓으시고

파일 업로드 -> STYLE 파일 전체 선택하셔서 올려 놓으시면 돼요!!!

그다음

아래 소스코드를 HTML/CSS 편집에 태그 사이에 입력합니다.

<!-- 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 설정 끝-->

를 아래와 같이 입력해줍니다.

그리고 저장을 누르신 다음에!!

게시물을 작성하실때 다음처럼 이용하면 됩니다.

pre class="이안에 사용하는 언어"를 입력하여 작성해 보시면 됩니다!!