오늘은 티스토리 블로그에 Syntaxhighlighter 를 적용하는 방법에 대해서 알아보도록 할거에요~ ㅎㅎ
티스토리 블로그에 소스 코드를 이쁘게 집어넣고 싶은 분 많으시죠~ ^_^
구글링을 하면서 다양한 티스토리 블로그의 이쁜 소스 코드들을 보셨을 텐데요
바로 Syntaxhighlighter라는 유틸리티를 사용하면 쉽게 소스 코드를 꾸밀 수 있답니다.
▲ Syntaxhighlighter의 default theme을 적용한 소스 코드 사진.
1. 유틸리티 다운로드
제일 우선으로 해야 할 것은 Syntaxhighlighter 유틸리티를 다운 받는 것입니다.
아래의 사이트에서 다운받을 수 있습니다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
받은 압축 파일을 압축 해제 하시면 다음과 같은 형태의 폴더 디렉토리를 확인할 수 있습니다.
2. 파일 업로드 (Script 및 CSS 파일을 업로드)
- Script 업로드
이제 티스토리 블로그에 스킨을 적용해야 할텐데요~
티스토리 블로그 관리 페이지로 들어가신 후,
TISTORY 관리 > 꾸미기 > HTML/CSS 편집 > 파일 업로드
에서 "+추가" 버튼을 클릭해주세요~
그리고, 아까 압축해제했던 파일의 디렉토리에서 "script" 디렉토리 속에 있는 모든 파일들을 선택해서 업로드해주세요.
- CSS 스타일 업로드
자, 이제 소스 코드는 전부 올렸고, 소스 코드의 테마를 적용하기 위해, 테마 샘플을 선택해서 업로드해주셔야 합니다.
다시 "+추가" 버튼을 클릭하시고
"styles" 폴더의 모든 파일들을 업로드해주세요.
3. HTML/CSS 의 skin.html 수정하기
TISTORY 관리 > 꾸미기 > HTML/CSS 편집 > HTML/CSS
로 이동해주세요. 그리고 제일 처음 보이는 skin.html을 수정해야 합니다.
<head>와 </head> 태그 사이에 다음 소스 코드를 입력해주세요.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushErlang.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<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>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.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/shBrushSass.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
그리고, skin.html 의 </body></html>태그 바로 앞에 다음 소스를 입력해주시면 됩니다.
<script type="text/javascript">
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
4. 사용법
이제 소스 코드를 이쁘게 집어넣는 방법을 사용하려면 소스 코드를 작업할 때마다 "HTML 모드"를 사용하셔야 합니다.
가장 기본적인 사용법은 아래와 같습니다.
<pre class="brush: [language]">
[source...]
</pre>
예를 들어보자면 다음과 같이 사용할 수 있습니다.
<pre class="brush: java">
class HelloWorld
{
public static void main(String[] args)
{
System.out.println("Hello World ! ");
}
}
</pre>
class HelloWorld
{
public static void main(String[] args)
{
System.out.println("Hello World ! ");
}
}
