티스토리에서 소스코드를 예쁘게 작성할 수 있는 방법이 없을까 해서
찾아본 방법 공유차 글 작성합니다.
1. 먼저 아래 첨부파일을 다운받습니다.
syntaxhighlighter_3.0.83.zip
----------------------------------------------------------------------
2. 압축을 풀면 아래와 같은 목록이 보입니다. 이 중에 scripts 폴더와 styles 폴더에 있는 파일만 사용합니다.
----------------------------------------------------------------------
3. 블로그 관리자 페이지로 이동 후 꾸미기아래 보시면 스킨편집을 눌러줍니다.
----------------------------------------------------------------------
4. 스킨편집화면 우측 상단을 보시면 아래와 같은 화면이 보이는데 여기서 html 편집을 눌러줍니다.
----------------------------------------------------------------------
5. 역시 우측상단에 아래와 같은 화면이 보이실텐데 여기서 파일 업로드를 선택하시고
다운받아 압축풀어두었던 목록중에서
scripts 폴더와 styles 폴더 안에 있는 모든 파일을 추가 하고 저장해줍니다
----------------------------------------------------------------------
6. 이제 HTML 목록을 눌러 아래 코드를 추가해야 합니다.
위 그림과 같이 두 곳에 소스를 복사해서 넣어야 합니다.
첫번째는 위 파란색 박스 부분에 관련된 소스인데
<head> 바로 아래부분에 아래 소스를 복사해서 넣으시면 됩니다.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushCSharp.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/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.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/shThemeEclipse.css"/>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
SyntaxHighlighter.all();
</script>
두번째 부분은 빨간색 박스로 표시된 부분인데
처음에는 <body> 형태로 되어있을 것입니다.
이부분을 아래 소스를 복사해서 넣으시고 저장을 누르시면 됩니다.
<body onload="dp.SyntaxHighlighter.HighlightAll('code');">
----------------------------------------------------------------------
7. 이제 모든 설정이 끝났고 블로그 작성시 실행하는법입니다.
블로그 글쓰기에서 HTML 부분을 체크해서
소스를 넣고 싶은 부분에 아래와 같이 태그를 작성하시고 그 사이에 소스를 작성하시면 됩니다.
<PRE class="brush: c#;">
//소스작성
</PRE>
----------------------------------------------------------------------
[예제]
<PRE class="brush: c#;">
public class Apple
{
public Apple()
{
}
}
</PRE>
[적용된 결과]
public class Apple
{
public Apple()
{
}
}
여기까지 소스코드 꾸미기(syntaxhighlighter)에 대한 사용법이었습니다.
감사합니다.^^
댓글