티스토리 뷰

코드 하이라이트, 문법 강조, 구문 강조, Syntax Highlighter...


어쨋든..!


#include <stdio.h>

int main(void)
{
	printf("hello, world?");
}


위와 같은 것을 원한다면 아래와 같이 적용해 나가보자



1. 준비 단계



우선 위 파일을 다운받는다.


아니면 http://alexgorbatchev.com/SyntaxHighlighter/ 이곳에 직접 가서,


오른쪽의 download로 가서 직접 받아도 된다.


그리고 그 바로 밑에 있는 installation 을 보면 적용시키는 방법도 나와있긴 하다.


어쨋든..!


다운 받은 압축파일을 압축 풀어준다. (응? 당연한건가...)




압축 푼 내용중 유의해서 볼 부분은 scripts 폴더와 styles 폴더 뿐이다.


그 폴더 안에 있는 모든 파일들을 html/css 편집에서 파일업로드에 쭉~ 업로드 시켜준다.



참조해보면 파일 확장자가 js(java script)인 파일들도 쭉 다 올라간 것이 보인다.



자 그러면 준비는 다 되었다 !




2. 적용 단계


참조할만한 사진이나 그림 없이, 바로 설명해주자면 html/css 편집에서 html/css 편집으로 들어가


skin.html 만 수정하면 된다.


윗부분의 <head>와 </head> 사이에 있는 <title 어쩌구> 보다 윗줄에 삽입해주면 된다.


<!-- Syntax Highlighter Setting Start -->
<!-- 필수 JS files -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
  
<!-- 사용할 언어 추가 -->
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
 
<!-- 사용할 스타일 추가 -->
<link type="text/css" rel="stylesheet" href="./images/shCoreMidnight.css">
 
<!-- 사용할 테마 추가 -->
<link type="text/css" rel="stylesheet" href="./images/shThemeMidnight.css">

<!-- 환경 설정 --> 
<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Setting End -->


자, 적용마저 끝났다.


# 참고로 사용할 언어에는 좀 주로 사용하게 될 언어들 위주로만 대충 추가해두었고,

# 스타일과 테마는 아까 styles 폴더 안에 있던 css 파일들 훑어보고 마음에 드는 것을 적용시키면 된다.


이젠 사용만 하면 된다 !!!




3. 사용 단계


사용은 굉장히 간단하고 매우 쉽다.


글쓰기모드에서 오른쪽 위에 있는 HTML을 체크한 뒤에


<pre class=brush:사용언어>

소스코드

</pre>


이렇게만 하면 저 소스코드가 자동으로 이쁘게 나와준다.


ex) HTML 체크된 상태에서 쓸 내용

<pre class="brush:c">

#include <stdio.h>


int main(void)

{

printf("hello, world?");

}

</pre>


==> 적용된 내용

#include <stdio.h>

int main(void)
{
	printf("hello, world?");
}


끝~~~

'MyStory > Tistory' 카테고리의 다른 글

음악 재생 막대(Music Player Bar)  (0) 2012.08.10
댓글