[syntaxhighlighter 사용 준비]
1. 첨부되어있는 'syntaxhighlighter_3.0.83.zip' 을 다운받고 압축 풀기
2. 필요한 파일 업로드 : script 폴더와 styles 폴더의 모든 파일
업로드 경로 : Tistory 관리자 - skin편집 - html 편집 - '파일업로드'
(* images/ 하위로 script와 styles 폴더의 모든 파일을 업로드)
3. HTML 파일 수정(skin.html)
3.1 수정1 : </head> 를 찾아서 바로 위에 아래의 코드 입력
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | </ style > <!--Start of SyntaxHighlighter--> < link href = "./images/shCore.css" rel = "stylesheet" type = "text/css" > < link href = "./images/shThemeDefault.css" rel = "stylesheet" type = "text/css" > < script src = "./images/shCore.js" type = "text/javascript" ></ script > < script src = "./images/shBrushJScript.js" type = "text/javascript" ></ script > < script src = "./images/shLegacy.js" type = "text/javascript" ></ script > < script src = "./images/shBrushBash.js" type = "text/javascript" ></ script > < script src = "./images/shBrushCpp.js" type = "text/javascript" ></ script > < script src = "./images/shBrushCSharp.js" type = "text/javascript" ></ script > < script src = "./images/shBrushCss.js" type = "text/javascript" ></ script > < script src = "./images/shBrushDelphi.js" type = "text/javascript" ></ script > < script src = "./images/shBrushDiff.js" type = "text/javascript" ></ script > < script src = "./images/shBrushGroovy.js" type = "text/javascript" ></ script > < script src = "./images/shBrushJava.js" type = "text/javascript" ></ script > < script src = "./images/shBrushPhp.js" type = "text/javascript" ></ script > < script src = "./images/shBrushPlain.js" type = "text/javascript" ></ script > < script src = "./images/shBrushPython.js" type = "text/javascript" ></ script > < script src = "./images/shBrushRuby.js" type = "text/javascript" ></ script > < script src = "./images/shBrushScala.js" type = "text/javascript" ></ script > < script src = "./images/shBrushSql.js" type = "text/javascript" ></ script > < script src = "./images/shBrushVb.js" type = "text/javascript" ></ script > < script src = "./images/shBrushXml.js" type = "text/javascript" ></ script > < script language = "javascript" > SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 설정 (기본값 True) SyntaxHighlighter.defaults['gutter'] = true; // 라인 번호 설정 (기본값 True) SyntaxHighlighter.defaults['tab-size'] = 2; // 탭 사이즈 설정 (기본값 4) SyntaxHighlighter.defaults['first-line'] = 1; // 라인 시작 숫자 (기본값 1) SyntaxHighlighter.defaults['auto-links'] = false; // 링크 설정 (기본값 true) SyntaxHighlighter.all(); </ script > <!--End of SyntaxHighlighter--> <</ head >> |
3.2. 수정2 : <body> 찾아서 '>' 앞에 Onload="dp.SyOnload="dp.SyntaxHighlighter.HighlightAll('code'); 추가
1 2 3 4 | <!--추가코드 : Onload="dp.SyntaxHighlighter.HighlightAll('code');" > (예시) < body id~~~~~~~(기존코드) Onload = "dp.SyntaxHighlighter.HighlightAll('code');" > |
[syntaxhighlighter 사용 하기]
글작성 중 source code를 적용하고 싶을 때 HTML편집모드에서 아래 코드를 입력하고 그 안에 소스코드 입력
1 2 3 4 5 | < SCRIPT type = "syntaxhighlighter" class = "brush: 코드언어" > <![CDATA[ //소스코드 그대로 입력 ]]> </ SCRIPT > |
예를 들어 html의 경우 <SCRIPT class="brush: html" type="syntaxhighlighter">
1 2 3 4 5 6 | < SCRIPT type = "syntaxhighlighter" class = "brush: html" > <![CDATA[ <HTML> </HTML> ]]> </ SCRIPT > |
예를 들어 python의 경우 <SCRIPT class="brush: python" type="syntaxhighlighter">
1 2 3 4 5 6 7 | < SCRIPT type = "syntaxhighlighter" class = "brush: python" > <![CDATA[ fruits = ['Banana', 'Apple', 'Lime'] loud_fruits = [fruit.upper() for fruit in fruits] print(loud_fruits) ]]> </ SCRIPT > |
*** 기본모드와 HTML모드를 왔다갔다 하다보면 코드가 안나오는 경우가 있는데,
잘 살펴보면, SCRIPT 안의 class=brush 항목이 자동으로 없어져있다. -- 수동으로 다시 입력!!!
※ 참고: https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Usage