출처 : http://diveangel.tistory.com/11
1. 개요
블로그의 포스팅할 내용들을 고민하던 중 아무래도 직업도 직업이고하니 IT관련 지식을 포스팅 해보자 마음 먹었습니다.
하지만 텍스트로 이루어진 소스코드를 포스팅 할 경우 너무나 무미건조해 보이기 때문에 여기저기 기웃거리던 중
딱 마음에 들어 사용하게 된 Syntax Highlighter 3.0
이 소스코드 하이라이터의 소개 및 설치 방법에 대해 설명하고자 합니다.
※ 티스토리를 사용하고 있는 분들 대상의 글입니다. 다른 설치형, 개방형 블로그들은 비슷한 방법으로 가능하겠지만
네이버, 다음 블로그 같은 폐쇠형 블로그는 불가능 할 수도 잇습니다.
2. 본론
2.1 설치
2012년 7월 18일 기준 최신버전을 첨부합니다.
syntaxhighlighter_3.0.83.zip 클릭!!!!
또는 제작자의 홈페이지 주소(http://alexgorbatchev.com/SyntaxHighlighter/) 에서 다운로드 합니다.
압축 파일을 압축해제 합니다.
빠른 설치를 위해 우리가 필요한 것은
"scripts 폴더 안의 .js 파일과 styles 폴더 안의 .css 파일"들입니다.
티스토리 관리자 기능에 로그인하여 다음 그림과 같이 파일을 업로드 합니다.
좌측 메뉴의 [HTML/CSS 편집] - [파일업로드] 탭 - 하단의 [+추가] 버튼을 클릭합니다.
파일다이얼로그 화면에서 위에 설명한 *.js 와 *.css들을 모두 선택하여 추가 하도록 합니다.
이제 스킨의 html을 편집할 차례입니다. [HTML/CSS] 탭을 클릭합니다.
skin.html 부분에 편집을 시작합니다.
<head> 태그와 </head> 태그 사이 아무곳에나 아래의 코드를 추가합니다.
눈치가 빠르신분들은 알겠지만
./images/shBrushCpp.js, ./images/shBrushJava.js 등 "shBrush" 뒤에 각각 프로그래밍 언어별로 하이라이트 양식이 따로 존재합니다. 내가 사용하지 않을 언어의 경우 삭제해도 상관 없습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script type="text/javascript" src="./images/shCore.js"></script><script type="text/javascript" src="./images/shLegacy.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><link type="text/css" rel="stylesheet" href="./images/shCore.css"><link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"> |
그 다음 javascript 를 실행하기 위해 skin.html의 맨 마지막 부분 </body></html> 앞부분에 아래의 코드를 추가합니다.
1 2 3 4 | <script type="text/javascript"> SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all();</script> |
꼭 <body></body> 태그 사이에 body의 마지막 부분에 추가하셔야 합니다.
화면이 모두 로드되고서 하이라이트 기능을 실행하는 소스코드입니다.
[저장] 버튼을 클릭하여 편집한 skin.html을 저장합니다.
2.2 글에 적용하기
자 이제 밑준비는 모두 끝났습니다. 실제로 사용할 일만 남았습니다.
<pre> 태그와 <script> 태그를 이용하는 방법이 있습니다. 저는 전자의 <pre> 태그를 사용하는 방법을 설명하겠습니다.
<script> 태그가 궁금하시다면 제작자의 홈페이지에서 확인 하십시오. ----> http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
---------------------------------------------------------------------
String.prototype.replaceAll = function(str1, str2)
{
var temp_str = "";
if (this.trim() != "" && str1 != str2)
{
temp_str = this.trim();
while (temp_str.indexOf(str1) > -1)
{
temp_str = temp_str.replace(str1, str2);
}
}
return temp_str;
}
---------------------------------------------------------------------
위와 같은 소스 코드를 하이라이트 하고 싶다 했을때 티스토리 글쓰기 화면에서 우측 상단의 "HTML" 을 체크하여
아래의 코드를 추가합니다.
<pre class="brush: 원하는 프로그래밍언어"> 입니다.
brush 뒤에 java, html, css, cpp 등을 지정하시면 됩니다.
---------------------------------------------------------------------
<pre class="brush: javascript">
String.prototype.replaceAll = function(str1, str2)
{
var temp_str = "";
if (this.trim() != "" && str1 != str2)
{
temp_str = this.trim();
while (temp_str.indexOf(str1) > -1)
{
temp_str = temp_str.replace(str1, str2);
}
}
return temp_str;
}
</pre>
---------------------------------------------------------------------
2.3 결과
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | String.prototype.replaceAll = function(str1, str2){ var temp_str = ""; if (this.trim() != "" && str1 != str2) { temp_str = this.trim(); while (temp_str.indexOf(str1) > -1) { temp_str = temp_str.replace(str1, str2); } } return temp_str;} |
3. 결론
소스 하이라이터 기능을 찾기 위해 몇가지 기능들을 살펴보았으나 제 기준에서 가장 효율적이다라는 생각이 들어
이렇게 정리하게 되었습니다.
소스코드를 포스팅하는 대상들이 프로그래밍과 컴퓨터에 어느정도 지식이 있다 생각되었기에
간략하게 설명으로 글을 마칩니다.
읽어주셔서 감사합니다.
'나는 컴쟁이다~!' 카테고리의 다른 글
| 좋은 이미지 뷰어 프로그램 소개합니다. (JPEGView) (0) | 2014.07.10 |
|---|---|
| 구글 드라이브(구글 닥스)를 이용해서 파일 공유하기(대용량 파일 15G까지 가능) (0) | 2014.06.18 |
| 구글 크롬 무설치 버전(Portable Google Chrome) (0) | 2014.03.25 |
| 정음글로벌 뷰어 다운로드 (구, 훈민워드뷰어) (0) | 2014.02.25 |
| PC에서 모바일 페이지 보기(크롬 플러그인 User-Agent Switcher for Chrome) (0) | 2014.01.19 |