오랫만에 블로그 꾸미기에 글을 올려봅니다.
잊고 살았던 블로그였는데.. 조금씩이라도 업데이트를 해야지 하는 생각에서..
금일 올릴 글은 Syntax Highlighter를 티스토리에 설치하는 방법을 올릴까 합니다.
아무래도 저의 블로그가 소스를 담고 있으니..
일단 준비물이 필요하죠. 준비물은
http://alexgorbatchev.com/SyntaxHighlighter/download/
이 곳에서 받으실 수 있습니다.
다운받아 압축을 풀면 위와 같이 많은 파일들을 볼수 있는데요.
저희가 필요한건 scripts 폴더와 styles 폴더안에 있는 파일들입니다.
업로드시 필수 파일
scripts/shCore.js
styles/shCore.css
styles/shThemeDefault.css
이지만 다 업로드 해도 상관은 없습니다.
저같은 경우는 귀찮아서리..
파일도 받았는데 업로드가 필요하겠죠.
관리자모드 메뉴에서 HTML/CSS 편집을 클릭합니다.
그럼 아래와 같이 새창이 뜹니다.
오른쪽 화면에서 파일업로드를 선택하시고, 아래 추가 버튼을 클릭하여 위에서 다운받은 scripts 폴더와 styles 폴더안에 있는 파일들을 모두 업로드합니다.
나중에 또 추가하려면 귀찮으니까요.. 하시고 소스상에서 링크만 안걸면 상관없어요..
업로드한 파일들을 보시면 images 라는 폴더 밑으로 파일들이 업로드 된것을 확인 할 수가 있습니다.
html을 선택한뒤 이미지와 같이 Header 부분에 붙여넣기를 한 후 저장하기를 클릭하면 적용이 됩니다.
<!-- Include required JS files -->
<script type="text/javascript" src="./images/shCore.js"></script>
<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="./images/shCore.css" rel="stylesheet" type="text/css" />
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
사용 방법은
<pre class="brush: js">
function setBrush()
{
alert("set Brush!!");
}
</pre>
와 같이 사용하면 되고 html 모드에서 작성하여야만 한다.
만약 스킨을 바꾸고 싶다면 html의 Header > Css 링크 부분에서
Styles 폴더의 파일 중
shCore....
shTheme....
의 파일을 맞추어 링크를 변경 해주면 된다.
브러시 정보는
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
에서 확인이 가능하다.
이상!
