이번에는 개발에 관련된 프로그램 코드들을 깔끔하게 포스팅글에 적용을 위한 방법을 소개하고자 합니다.
개발코드를 마치 에디터에서 적용한듯한 효과를 내기위해서는
"Syntaxhighlighter" 를 이용하여 적용하면 되겠습니다.
그럼 다운로드부터 적용하는 과정까지 작성을 해보겠습니다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
접속 후 오늘날짜 기준 최신인 3.0.83 버전을 다운로드 받도록 하겠습니다.
파일을 받으셨다면
폴더(SCRIPTS / STYLES)내에 있는 파일들을 모두 업로드 하도록 합니다.
업로드가 완료되셨다면 HTML/CSS 탭으로 이동하셔서 다음 코드를 작성해주도록 합니다.
1 | < link rel = "stylesheet" type = "text/css" href = "./images/shCoreEclipse.css" /> |
상단 코드에서 href부분에 ./images/shCorexxxx.css 는 코드디자인 스킨인대요.
저는 임의로 이클립스 테마를 적용한 것이고 올리신 css파일들을 변경하고 적용하셔서
본인이 마음에 드시는 테마로 설정 잡아주시면 되겠습니다 ^^
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 37 | < 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>
이런 형식으로 적용해주셔야 합니다.
실제 상단 코드의 결과를 보시면
1 | < input type = "text" /> |
위처럼 나오게 되는거죠.
그럼 유용하게들 사용하세요~
by 개발로짜
내 블로그를 네이버 검색등록을 이용하여 검색에 노출시키자 (0) | 2014.10.06 |
---|---|
네이버 이웃추가로 티스토리 블로그 방문수를 늘려보자 (2) | 2014.10.04 |
구글 페이지스피드 인사이트로 티스토리 블로그 로딩속도 평가하기 (0) | 2014.10.04 |