몇몇 블로그를 찾아가다보면, 소스코드를 예쁘게 정리해서
보기 좋게 올리는 분들이 많이 있습니다.
하지만 저도 소스코드를 제블로그에서 사람들이 보기쉽게 적용 시키면 html언어와
결합되어 제대로 표현되지않거나, 구분되어있지않아, 알아보기가 힘듭니다.
이런점을 좋게 표현하거나 보기 좋게 하이라이트 처리를 해주는것이
소스코드하이라이터라고 부릅니다.
웹페이지 형식도 있고, 설치후 태그를 입력해서 사용하는 방식도 있습니다.
그중에 SyntaxHighlighter 소개 하려고 합니다. 이 소스코드하이라이터는
아이폰 개발 언어인 오브젝트C의 테마도 갖고있어 추천합니다.
우선 티스토리에 설치를 해야하기 때문에 파일을 다운로드 합니다.
1. http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서
Click here to download. 를 누릅니다.
downLoad 파일을 압축해제합니다.
2. 블로그 Tistoty 관리 페이지에 꾸미기
HTML/CSS 편집
상단에 파일업로드
하단에 추가+
누른 후 위에서 압축해제한 파일중
※ scripts 폴더의 파일을 전부 업로드 합니다.
2-1. 오브젝트C 의 스크립트는 없으므로 따로 아래에서 다운받아서 위처럼
파일 업로드를 해줍니다.
shBrushObjC.js
Brush Name : oc
브러쉬 네임은 사용시 필요하니 기억해둡시다. 사용법에서 자세히 다루겠습니다.
출처 : http://www.andrashatvani.com/
3. 압축해제한 폴더중 styles 폴더의 내용중
shCore.css 파일과 원하는 테마 파일업로드를 추가합니다.
예) shCore.css + (shCoreMidnight.css + shThemeMidnight.css)
테마 샘플 보기
슬라이드쇼
4. 이제는 HTML/CSS 편집을 해주어야합니다. skin.html 과 style.css중
skin.html 을 수정합니다.
우선 head 부분에 코드를 입력해야합니다.
아래 코드를 head 부분 안에 삽입합니다.
</head> 윗 부분에 넣으면 됩니다.
※ 자신의 테마에 맞게 아래 코드 마지막부분 파일명을 수정해줍시다!
1 2 3 4 5 6 7 | <br>
<link rel="stylesheet" type="text/css" href="./images/shCoreMidnight.css">
<br>
|
삽입예시
5. skin.html 의 body 부분을 수정해줍시다.
위와 마찬가지로 </body> 부분 위에 삽입을 해주면 됩니다.
※shCore.js 는 맨윗부분에 삽입!
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 30 31 32 33 34 35 36 | <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/shBrushObjC.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>
|
삽입예시
6. 설치완료 끝
7. 사용법
기본사용법 : 글쓰기를 하고, HTML편집모드로 작업환경을 바꿉니다.
<pre class="brush: 알맞은brush Name">
소스 코드 입력
</pre>
사용하는 소스 코드의 알맞은 brush Name을 적어줘야합니다.
예를 들어 오브젝트C 의 경우 위에서 언급한 브러쉬 네임인 oc를 적어야합니다.
<pre class="brush: oc">
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *resultLabel;
-(IBAction)pressButton :(id)sender;
@end
</pre>
1 2 3 4 5 6 7 | @interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *resultLabel;
-(IBAction)pressButton :(id)sender;
@end
|
< 브러쉬 번들>
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
추가 옵션 사용법
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
출처 : http://cocosoft.kr/68
저도 이대로 했는데.... 작성완료하고 게시하면 글이 이상하게 깨지더군요 ㅜㅜ 배경은 알맞게 바뀌는데 코드가 지맘대로 바뀌게 됩니다.
다른 블로그에 보니
< 가 사용되는 부분을 < 로 바꿔주면 된다고 하는군요;;
그래서 저도 이렇게 바꿔서 해보니 지맘대로 바뀌던 부분으 제가 원래 작성했던 부분으로 나오긴 합니다.(아직 완벽하게 고쳐진건 아니지만....) 다른 분들도 참고하세용~~~ ㅎㅎ
