티스토리에 syntaxhighlighter 설치 및 반영하여 소스코드 깔끔하게 적용하기
이번에는 개발에 관련된 프로그램 코드들을 깔끔하게 포스팅글에 적용을 위한 방법을 소개하고자 합니다.
개발코드를 마치 에디터에서 적용한듯한 효과를 내기위해서는
"Syntaxhighlighter" 를 이용하여 적용하면 되겠습니다.
그럼 다운로드부터 적용하는 과정까지 작성을 해보겠습니다.
사이트방문하여 파일 다운로드받기
http://alexgorbatchev.com/SyntaxHighlighter/download/
접속 후 오늘날짜 기준 최신인 3.0.83 버전을 다운로드 받도록 하겠습니다.
파일을 받으셨다면
폴더(SCRIPTS / STYLES)내에 있는 파일들을 모두 업로드 하도록 합니다.
업로드가 완료되셨다면 HTML/CSS 탭으로 이동하셔서 다음 코드를 작성해주도록 합니다.
<head>태그 사이에 넣어줄 태그
<link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css"/>
상단 코드에서 href부분에 ./images/shCorexxxx.css 는 코드디자인 스킨인대요.
저는 임의로 이클립스 테마를 적용한 것이고 올리신 css파일들을 변경하고 적용하셔서
본인이 마음에 드시는 테마로 설정 잡아주시면 되겠습니다 ^^
</body>상단에 넣어줄 태그
<script type="text/javascript" src="./images/shCore.js"></script> <!-- 액션스크립트 --> <script type="text/javascript" src="./images/shBrushAS3.js"></script> <!-- 쉘 --> <script type="text/javascript" src="./images/shBrushBash.js"></script> <!-- C프로그래밍 --> <script type="text/javascript" src="./images/shBrushCpp.js"></script> <!-- CSS --> <script type="text/javascript" src="./images/shBrushCss.js"></script> <!-- 델파이 --> <script type="text/javascript" src="./images/shBrushDelphi.js"></script> <!-- JAVA --> <script type="text/javascript" src="./images/shBrushJava.js"></script> <!-- JAVAFX --> <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> <!-- PHP --> <script type="text/javascript" src="./images/shBrushPhp.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/shBrushScala.js"></script> <!-- SQL --> <script type="text/javascript" src="./images/shBrushSql.js"></script> <!-- 비주얼베이직 --> <script type="text/javascript" src="./images/shBrushVb.js"></script> <!-- XML --> <script type="text/javascript" src="./images/shBrushXml.js"></script> <!-- SyntaxHighlighter 호출 --> <script type="text/javascript">SyntaxHighlighter.all()</script>
상단부분외에도 더 많은 JS파일들이 있지만
어떤 코드를 작성할때 사용되는 스크립트인지 몰라서 아는것만 작성해보았습니다.
모두 INCLUDE하실필요는 없고 작성에 필요한 JS파일들만 INCLUDE 하시면 되실거 같습니다.
사용법
사용하는 방식은 포스팅 작성시 등록하시려는 코드들을 <pre></pre>태그내에 작성을 해주시면 되는데
pre태그 속성에 다음과 같이 속성을 정해주셔야 합니다.
<pre class="brush:적용할코드alias">
// 코드
</pre>
위의 규격에 맞춰주시면 됩니다.
"적용할코드alias"는 하단 링크를 통해서 참고하시면 되실거 같습니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
※ 코드적용시 주의해야 할 사항은 꺽쇠들을
< 일경우에는 <
> 일경우에는 >
라고 치환들을 해주셔야 합니다.
스크립트 코드를 예를들어보면
<pre class="brush:html;">
<input type="text" />
</pre>
이런 형식으로 적용해주셔야 합니다.
실제 상단 코드의 결과를 보시면
<input type="text" />
위처럼 나오게 되는거죠.
그럼 유용하게들 사용하세요~
by 개발로짜