티스토리 소스코드 강조!!

티스토리에 웹프로그램 관련 팁들을 올리려 합니다.

이제 경력 1년 9개월차라 많이 아는 것은 없네요. 학원에서 배운건 jsp가 다인데.. 회사와서는 정작

asp,php만 죽어라 했네요. 뭐 정말 대단한 알고리즘이 있고 그런건 아닙니다.

개발자의 필살기 [CCCV] 를 위해서 이렇게 올립니다.

그러기에 앞서 다른 분들 블로그를 보면 소스를 참고 할때 보면 정말 깔쌈하게 올려 놓은걸 보곤 했습니다.

이게 무엇인고 하며 찾던중 SyntaxHighlighter (사진참조) 라는 것 입니다.

 

 

---

이런거 이런거!! 하고싶넹~ 

 

---

 

 

 

설치 방법 부터 배울까요?

1. 다운 로드는 여기서 하세요. (사진참조)

            다운:syntaxhighlighter_3.0.83.zip

링크: http://alexgorbatchev.com/SyntaxHighlighter/download/

 

 

2. tistory에 장착 하기. (사진참조)

기본 필수 파일 : scipts/shCore.js, styles/shCore.css, styles/shThemeDefault.css

사용소스코드에 따라 brush 업로드

ex)  syntaxhighlighter_3.0.83\scripts\shBrushCSharp.js,shBrushJava.js,shBrushJScript.js .... 등등

 

 

[HTML/CSS] 에서 다음과 소스를 추가해주세요

 

---

 

<SCRIPT type=text/javascript src="./images/shCore.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushJScript.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushCss.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushJava.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushSql.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushXml.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="./images/shCore.css">
<LINK rel=stylesheet type=text/css href="./images/shThemeDefault.css"> 
<SCRIPT type=text/javascript>
//<![CDATA[   
 SyntaxHighlighter.config.bloggerMode = true;   
 SyntaxHighlighter.all();
//]]>
</SCRIPT>

 

---

 

3. Tstory에 적용하는 방법

 

작성시 class 를 지정해주시면됩니다. 아래 예제는 자바스크립트 이기때문에 js로 지정 되었구요. 아래 사진을 보시면

각자 원하는 언어에 대한 클래스가 있으니 참고 하시길 바랍니다.

 

script)

<script type="syntaxhighlighter" class="brush: js"><![CDATA[  /**   * SyntaxHighlighter   */  function foo()  {      if (counter <= 10)          return;      // it works!  } ]]></script>

 

class)

     

 

결과) 

 

 

*추가적인 사항은 아래 주소를 참조해주세요

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html