아래 손가락을 눌러주세요. 

 





프로그래밍에 관한 포스팅을 할 때, 소스코드를 작성해야 할 경우가 많습니다. 각 편집툴마다 소스코드의 서식이 있는데 적용 안하고 포스팅하자니 가독성이 떨어지고.. 일일이 서식을 편집하자니 너무 힘들고..

그래서 이 문서에서는 손쉽게 서식을 적용하기 위한 방법을 소개합니다.




 일반 소스코드를 간단히 붙여 넣어도 그림처럼 서식을 넣을 수 있습니다.









  파일 업로드 및 HTML/CSS 편집


 1. 아래 파일을 다운 받고 압축을 풉니다.


syntaxhighlighter_3.0.83.zip

 syntaxhighlighter 사이트: http://alexgorbatchev.com/SyntaxHighlighter/



2. 티스토리 관리자모드에서 [꾸미기] - [HTML/CSS 편집] - [파일 업로드] 로 이동합니다. 아까 압축 풀었던 폴더에서 scripts 폴더와 styles 폴더에 있는 모든 파일을 업로드 합니다.




3. [HTML/CSS] 탭으로 이동합니다. skin.html 영역에서 밑줄 친 부분 아래에 첨부 된 파일을 다운 받아 소스를 추가합니다. <head> ~ </head> 부분입니다.


skin 소스코드서식1.txt



4. 마찬가지로 skin.html 에서 </body> 부분 위에 아래 파일을 다운 받아 코드를 추가합니다.


skin 소스코드서식2.txt







  syntaxhightlighter 사용 방법



 글쓰기에서 html 모드에서 다음과 같은 형식으로 작성하시면 됩니다.


<pre class="brush:OOO">

~소스코드~

</pre>





적용 가능한 언어들의 종류입니다.

ex) brush:cpp, brush:java 등





코드의 스타일을 바꾸는 방법도 있습니다. skin 소스코드서식1.txt 파일에 있던 소스 중에서

<LINK rel=stylesheet type=text/css href="./images/shThemeEmacs.css"> 의

연두색 부분을 수정하시면 스타일이 바뀝니다.
 스타일 종류는 styles 폴더에 있던 파일 이름들로 모두 가능합니다. ※ shCore.css 는 제외




티스토리에 syntaxhighlighter로 코드를 작성할 때 원하는 대로 작성이 안 될 때가 있습니다. 이러한 문제를 위해 아래 프로그램을 사용하면 해결할 수 있습니다. 견족자K 님 께서 개발하신 프리웨어입니다.


SHCC.exe





posted by 쪼재