[블로그] syntax highlight 티스토리 적용기
참고한 블로그 : http://sometimes-n.tistory.com/5
설치개요 ||
1. 프로그램 다운
2. 필요한 파일 복사 & 티스토리에 붙여넣기
3. 사용자 설정을 위한 소스코드 수정
설치실시 ||
1. 아래의 경로에서 프로그램을 다운 & 압축을 푼다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
2. 압축을 푼 파일을 중 style과 script 폴더내에서 있는 모든 파일을 티스토리에 업로드 한다.
2-1) HTML/CSS편집
2-2) script와 styles 내에 있는 파일 모두 선택
2-3) 선택한 파일 업로드
3. 소스코드 편집
<link href="./images/shCore.css" rel="stylesheet" type="text/css"/> <link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shBrushJScript.js"></script> <script type="text/javascript" src="./images/shLegacy.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/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/shBrushGroovy.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/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> <script type="text/javascript">
4. 사용하기
4-1) html을 클릭 한 후에 태그 안에 소스코드를 작성한다.
<pre class="brush:원하는 스타일명"> 소스코드 </pre>
4-2) 사용예
<pre class="brush: html">
</pre>
5. 주의사함
티스토리에서 제공하는 스킨을 사용할 경우, pre태그에 스타일이 적용되어 있을 수 있습니다. 따라서 CSS모드에서 pre 태그를 검색한 후, 적용된 스타일을 제거 혹은 주석 처리해주셔야 합니다. 더 자세한 설명은 아래 블로그에 너무나 정리가 잘 되어있으니 참고하시면 되겠습니다.
참고한 블로그 : http://sometimes-n.tistory.com/5