인터넷을 하다보면 종종 에디트 플러스나 이클립스 등과 같은
문서 편집기를 쓴듯 한 프로그램 코드를 볼 수 있습니다.
위는 이클립스에서 작성한 코드
아래는 SyntaxHighlighter로 표시된 코드
import javax.swing.*;
public class GUI {
public static void main(String args[])
{
//프래임 객체 생성
JFrame frame = new JFrame("Windows");
//버튼 객체 생성
JButton button = new JButton("click");
//프레임에 버튼을 추가
frame.getContentPane().add(button);
//프레임 크기 (가로,세로)
frame.setSize(300,200);
//프레임 표시
frame.setVisible(true);
}
}
별반 차이가 나지 않습니다.
때문에 가독성을 높일 수 있습니다.
그럼 중요한 건 어떻게 해야 사용 할 수 있는가?
현 포스팅을 작성하는 시점에서 버전은 3.0.83 이었습니다.
1. 설치방법
http://alexgorbatchev.com/SyntaxHighlighter/
위 사이트에서 파일을 다운 받습니다.
압축을 풀면 다음과 같은 파일들이 나오는데
우리가 필요한 것은 scripts 와 styles의 파일만 있으면 됩니다.
먼저 styles 폴더를 보면
붉은색으로 체크 해둔 것과 같이 shCore 로 시작하는 파일과 shTheme 로 시작하는 파일이 있는데
우리는 shCoreXXX.css 파일만 있으면 됩니다.
shCoreXXX 파일 내용은 shCore.css + shThemeXXX.css 를 합친 내용이기 때문입니다.
테마 종류는 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 에서 확인 가능합니다.
본인이 쓰고 싶은 CSS파일을 선택하여 티스토리-스킨-파일업로드를 시킵니다.
저는 이클립스를 주로 쓰는지라 shCoreEclipse.css 파일을 업로드 시켰습니다.
다음은 scripts 폴더의 파일도 마찬가지로 스킨에 업로드 시킵니다.
3.0 이후로 autoloader 이라는 기능이 생겨 사용하는 스크립트만 불러오게 하여 속도를 향상시킨 듯 합니다.
때문에 모든 파일을 업로드 시켜도 되지만
특정 언어만 사용할 경우 아래의 사이트를 참고하여 필요한 파일만 업로드 해도 됩니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
일단 저는 script폴더 안에 모든 파일을 전부 업로드 하였습니다.
다음은 HTML/CSS 편집 skin.html 의 <head> 와 </head> 사이에
아래의 코드를 입력합니다. 물론 css 파일은 자신이 업로드 시킨 파일 이름으로 바꿔주면 됩니다.
그리고 </body> 위의 </s_t3> 위에 1~38번 라인을 입력하고 저장을 합니다.
<!-- SyntaxHighlighter 시작 --> <script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shAutoloader.js"></script> <script type="text/javascript"> //<![CDATA[ SyntaxHighlighter.autoloader( 'applescript ./images/shBrushAppleScript.js', 'actionscript3 as3 ./images/shBrushAS3.js', 'bash shell ./images/shBrushBash.js', 'coldfusion cf ./images/shBrushColdFusion.js', 'cpp c ./images/shBrushCpp.js', 'c# c-sharp csharp ./images/shBrushCSharp.js', 'css ./images/shBrushCss.js', 'delphi pascal ./images/shBrushDelphi.js', 'diff patch pas ./images/shBrushDiff.js', 'erl erlang ./images/shBrushErlang.js', 'groovy ./images/shBrushGroovy.js', 'java ./images/shBrushJava.js', 'jfx javafx ./images/shBrushJavaFX.js', 'js jscript javascript ./images/shBrushJScript.js', 'perl pl ./images/shBrushPerl.js', 'php ./images/shBrushPhp.js', 'text plain ./images/shBrushPlain.js', 'py python ./images/shBrushPython.js', 'ruby rails ror rb ./images/shBrushRuby.js', 'sass scss ./images/shBrushSass.js', 'scala ./images/shBrushScala.js', 'sql ./images/shBrushSql.js', 'vb vbnet ./images/shBrushVb.js', 'xml xhtml xslt html ./images/shBrushXml.js' ); //SyntaxHighlighter.config.bloggerMode = true; //SyntaxHighlighter.config.stripBrs = true; //SyntaxHighlighter.defaults['html-script'] = True; SyntaxHighlighter.all(); //]]> </script> <!-- SyntaxHighlighter 끝 --> </s_t3> </body> </html>
이걸로 설치가 완료 되었습니다.
사용시에는 아래와 같은 형식으로 사용하면 됩니다.
<PRE class="brush: 언어명"> 내용 </PRE>
다음은 옵션 설정에 관하여 다뤄보도록 하겠습니다.
http://resup.tistory.com/6
'기타 > 미분류' 카테고리의 다른 글
| 법인세신고 접대비조정명세서 작성 방법 (손금불산입) (0) | 2019.03.05 |
|---|---|
| 감기약 중 소염제 (0) | 2011.09.29 |
| 웹 구문강조 어플리케이션 SyntaxHighlighter 사용 설정 (2) | 2011.09.23 |
| 프로필 이미지 크기 변경하기 (0) | 2011.09.21 |
| 화면캡쳐 프로그램 오픈캡쳐, 안카메라 간단 사용기 (0) | 2011.09.21 |