티스토리에 코딩소스 넣는방법 (SyntaxHighlighter)

 티스토리에 코딩소스 넣는방법(SyntaxHighlighter)-하이라이터

 

안녕하세요.

직장에서 벗어나 자신의 삶을 살아갈 수 있도록 도와주는 드림빌더 꿍스뿡이 입니다.

 

오늘은 티스토리에 코딩소스를 넣는 방법에 대해 알아보도록 하겠습니다.

 SELECT "HELLO WORLD!!" AS TITLE  FROM DUAL

 [syntaxHighlighter 적용모습]

 

 

01 SyntaxHighlighter 접속하기

[SyntaxHightlighter 캡처화면]

 

우선 SyntaxHighlighter사이트에 접속합니다. 

사이트주소 : (http://alexgorbatchev.com/SyntaxHighlighter/) 

사이트에 접속한 뒤 우측의 download버튼을 클릭하면  아래와 같은 화면이 나타납니다. 

 

 

 

 

 

 

 

02 SyntaxHighlighter 다운로드

 

[gitHub 캡처화면]

 

DownLoad버튼을 클릭하면 위와같이 gitHub 사이트가 연결됩니다.

현재 SyntaxHighlighter는 버전이 4까지 나왔으나 티스토리에서 사용하기에는 적합하지 않은 파일의 형태를 가지고 있습니다. 상단에 표시된 release버튼을 클릭합니다.

[gitHub 캡처화면]

 

releases버튼을 클릭하면 위와같은 화면이 나타날탠데, 거기서 3.0.83버전 밑에 있는 소스코드를 다운받으시면 됩니다.

(경로 바로가기 : https://github.com/syntaxhighlighter/syntaxhighlighter/releases/tag/3.0.83)

 

 

syntaxhighlighter-3.0.83.zip

 

[syntaxHighlighter 3.0.83 버전]

 

소스코드를 다운받기 어려우신 분들은 하단위 첨부파일을 다운받아 주세요!

 

 

 

 

 

 

03 압축파일 해제

[압축파일 해제 캡처화면]

 

해당 파일을 다운받으신 후 압축파일을 풀면 위와같은 화면이 나타납니다.

여기서 우리는 scripts, styles 안에 있는 소스파일을 우리의 티스토리에 업로드할 것입니다.

 

 

 

 

 

04 티스토리에 적용하기

[티스토리 환경설정 캡처화면]

 

파일의 압축이 끝나셨으면 블로그관리의 스킨편집으로 이동해주세요

 

 

[스킨편집->html편집->파일업로드 캡처화면]

 

스킨편집에 접속하신 후 html편집을 클릭하신 후 파일업로드에서 아까 다운받았던 파일들 중에서

styles, scripts 폴더안의 파일을 업로드해주시기 바랍니다.

 

 

 

[스킨편집->html편집->HTML 캡처화면]

 

 

 

파일업로드가 완료되면 이젠 소스코드를 적용할 차례입니다.

HTML편집을 클릭한 후 위와 같이 코드를 추가하시기 바랍니다.

(하단의 소스코드를 복사해서 적용해주세요.)

<link rel=" stylesheet" =""="" type="text/css" href="./images/shCoreRDark.css">

[head 태그부분에 추가해야할 소스코드]

 

head태그상에 있는 shCoreRDark는 스킨입니다. 저는 검은 바탕을 좋아해서 해당 스킨을 적용했으나

다른 스킨을 원하시는분은 style태그에 있는 css명칭을 참고하여 적용하시면 됩니다.

 

 

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript"> SyntaxHighlighter.all(); </script>

 [body 태그부분에 추가해야할 소스코드]

 

적용을 완료하면 저장버튼을 클릭합니다.  이로서 소스적용 과정은 완료되었습니다. 

 

 

 

05 테스트해보기

 

[글작성 캡처화면]

 

이제 소스가 정상적으로 적용되었는지 확인을 해보겠습니다.

우선 글쓰기 버튼을 클릭합니다. 여기서 바로 작성하지 마시고

html버튼을 클릭한 뒤 아래의 코드를 작성해 주세요.

 

<pre class="brush:sql">

본문내용 
</pre>

 

해당 구문에 대한 설명은 아래와 같습니다.

pre : 코딩소스는 pre태그내에서만 적용되어 집니다. 작성하고자 하는 소스코드는 반드시 이 태그 안에서

       작성해주세요.

brush : 어떠한 유형의 소스코드로 적용되어지는지 작성해야 합니다. 예를들면 brush:java일 경우 java 문법에 맞는

          색상으로 표시되어 집니다.

본문내용 : 해당 부분에 코드를 작성합니다.

 

샘플로 코딩소스를 작성하신 후 미리보기를 클릭하면 아래와 같은 화면이 나타나면 성공입니다.

 

 

 

 [미리보기 캡처화면]

 

 

06 꺽쇠에 주의하세요! 

[parkjuwan 캡처화면]

 

소스코드를 입력할때 주의해야할 사항은 꺽쇠 <>를 변환해줘야 합니다.

만약 그대로 꺽쇠를 작성하면 제대로 동작하지 않을 수 있습니다.

하지만 이러한 꺽쇠를 그때그때 수정해야 하면 너무 번거롭기 때문에

꺽쇠를 자동으로 변환해주는 사이트를 소개하며 포스팅을 마치겠습니다.

 

parkjuwan 사이트 : (http://parkjuwan.dothome.co.kr/webapp/ltgt_conv/)

 

사용방법은 왼쪽에 소스코드를 작성하신 후 cov버튼을 클릭하면 오른쪽에 변환된 소스파일이 생성됩니다.

이렇게 변환된 소스파일을 <pre>태그 안에 적용해주시면 됩니다.

 

지금까지 티스토리에 코딩소스 넣는방법에 대한 포스팅이었습니다!

 

 

내용이 도움이 되셨거나 초보 블로거를 응원하고 싶은신 분은 공감버튼을

내용의 수정이 있거나 도움이 필요하신 분은 댓글을 남겨주세요~