티스토리 syntaxhighlighter 스킨 적용/변경 하기

 

syntaxhighlighter_3.0.83.zip

0.17MB

#위치

블로그 관리 > 스킨편집 > html 편집

티스토리 디자인이 바뀌거나 하면서 달라질 수 있음

 

#파일 업로드
./scripts 아래 *.js 전체 업로드
./styles 아래 *.css 전체 업로드

 

- 뭘 사용할지 정했다면 특정 css만 업로드 해도 된다.
- 공통 : shCore.css
- 선택 : shCore에디터.css + shTheme에디터.css
예) shCore.css + shCoreEclipse.css + shThemeEclipse.css

#블로그 CSS 에디터 편집
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/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/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">

 

#적용(업로드)한 sh테마 아래 삽입 
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
예) shThemeEclipse.css를 골랐다면 
<link type="text/css" rel="stylesheet" href="./images/shThemeEclipse.css">

 

#그 아래 javascript 붙여넣기
<script type="text/javascript"> 
SyntaxHighlighter.all(); 
</script>

 

이렇게

#바디 메소드 추가 (Onload)
Onload="dp.SyntaxHighlighter.HighlightAll('code');"

#사용

<pre name="code" class="brush:java;">
##이부분에 소스코드##
</pre>


#폰트 변경이나 사이즈 변경은
shCore.css 의 font-family 수정