티스토리에 글작성할 때 그동안 Color Scripter로 소스를 올렸었는데, 반응형 스킨이라서 그런지 몰라도 제가 원하는대로 수정하기 힘들어서 바꾸고 싶어졌습니다. 그래서 알아보다가 한번 적용 시켜본 소스코드 플러그인이 SyntaxHighlighter입니다.
설명에 앞서 일단 적용부터 시켜볼게요. 많은 말이 필요 없습니다. 사람들이 왜 이 플러그인을 사용하는지 써보면 알겠더라구요. But~ 하지만 혼자서 적용하기엔 좀 까다롭기 때문에 잘 보고 따라하셔야 됩니다.
■ 적용방법
- 주소링크 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에 들어가서 위 사진에 빨간색 화살표가 가르키는 Click here to download를 클릭하여 다운로드를 받습니다.
- 압축을 풀면 여러개의 폴더와 내용물 중 Scripts 폴더와 Styles 폴더가 보이실 겁니다. 이 내용을 기억하시고~
- 티스토리 관리자 모드 → HTML/CSS 편집을 눌러 파입업로드 탭으로 이동합니다.
- 그리고 위에서 언급했던 Scripts와 Styles 폴더 내용물을 전부 추가시켜주시고 저장!
- 사실 HTML부터 소스를 추가해도 되지만 아까 다운로드 받았던 파일들을 추가하기 위해 먼저 언급했습니다. 순서는 아무거나 먼저 하셔도 상관없어요!
- 다음 HTML 탭으로 이동하여 <head></head>사이에 각자 자기가 사용할 테마를 설정해줍니다.
- 저는 이클립스 테마로 <link rel=" stylesheet" =""="" type="text/css" href="./images/shCoreEclipse.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>
그럼 이제 모든 설정은 끝났고, 글을 쓰실때 한가지 태그만 사용하면 SyntaxHighlighter 플러그인을 적용할 수 있습니다. 실행 및 결과를 한번 볼까요?
■ 적용결과
글쓰기 모드에서 HTML 모드를 선택한 후
<pre class="brush:html">
소스코드가 들어갈 곳~!
</pre>
태그를 사용하여 <pre></pre> 사이에 소스코드를 넣어주시면 됩니다. 아래는 제가 쓴 글 중 SyntaxHighlighter를 적용시킨 부분만 골라봤습니다.
이렇게 각 프로그래밍 언어에 맞게 brush:html / bush:javascript 고쳐주시기만 하면 그에 맞는 하이라이터 색깔들이 변경되어 보기 편하실거에요.
'블로그로 돈벌기 > 꾸미기' 카테고리의 다른 글
| 상업적 무료로 이용할 수 있는 이미지+아이콘 사이트 추천! (0) | 2017.02.24 |
|---|---|
| 티스토리 SyntaxHighlighter 코드자동변환 프로그램 (0) | 2017.02.02 |
| 카카오 인코더〃MP4 파일 webm 파일로 변환 (0) | 2017.01.09 |
| 티스토리 SyntaxHighlighter 테마/브러쉬 변경 (0) | 2016.12.09 |
| 웹사이트에서 포토샵처럼 이미지 반투명 편집하기 (0) | 2016.09.29 |
| 티스토리 전체글 화면설정하기 (0) | 2015.09.17 |
| 블로그 제목틀 만들기 (ppt+캡쳐) (0) | 2015.08.29 |
| 티스토리 사이트맵 생성후 웹마스터에 등록하기 (21) | 2015.08.28 |