설치
0. syntaxhighlighter를 다운로드 한 뒤 압축을 푼다.
SyntaxHighlighter_v3.0.83.zip
1. 블로그 관리 화면에서 꾸미기 - 스킨 편집으로 진입한다.
※ 블로그주소/manage/design/skin/edit#/
2. 우측 상단에 html 편집 버튼 클릭

3. 우측 상단에서 파일업로드 클릭 - 화면 하단에 [+추가] 버튼 클릭

4. syntaxhighlighter 폴더에서 scripts 폴더, styles 폴더 안에 있는 파일을 모두 업로드 한다.

5. HTML 탭으로 이동한다.
6. </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 | < 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" >
< link type = "text/css" rel = "stylesheet" href = "./images/shThemeDefault.css" >
< script type = "text/javascript" >
SyntaxHighlighter.all();
</ script >
|
사용 방법
코드를 삽입하고 싶은 구간에 아래 내용을 입력한다.
<pre class="brush:언어">
</pre>
위와 같이 작성하면 본문에 아래와 같은 회색박스가 생긴다.
회색박스가 위치한 공간에 코드를 작성한 후 발행하면 된다.
html 모드에서 직접 코드를 작성할 경우 <, > 같이 태그에서 사용하는 특수문자가 제대로 표기되지 않으므로 코드는 에디터 모드에서 입력하는 것을 권장한다.
참고로 일반 붙여넣기를 하거나 직접 작성하는 경우 <pre> 태그 사이에 <p> 태그가 추가되어 위에 출력되는 예제처럼 실제 출력 시에 <p></p> 태그가 출력된다. 글 작성 시 이 부분에 대해 체크할 필요가 있다.
참고 - 티스토리 코드블럭
티스토리의 새로운 글쓰기에는 코드블럭을 삽입할 수 있는 자체 기능이 있다.
티스토리에서 공식적으로 지원하는 기능인만큼 별도의 설치가 필요 없고 사용하기 쉽다는 장점이 있지만
새로운 글쓰기에서만 지원되는 기능이고, 별도의 커스터마이징을 할 수 없다.
사용 방법은 아래와 같다.
0. 블로그 설정에서 콘텐츠 - 설정으로 진입한 후 새로운 글쓰기를 [사용합니다]를 선택 후 [변경사항 저장]을 클릭한다.

1. 글쓰기 화면에 진입하면 상단 메뉴 중 […] 버튼을 클릭한 후 [<> 코드블럭]을 클릭한다.

2. 코드블럭 화면이 출력된다.
코드블럭 삽입에서 작성하고자 하는 언어를 선택한 뒤 본문에 코드를 작성한 후 확인을 클릭하면 본문에 코드가 삽입된다.

지원 언어: HTML, CSS, Javascript, Python, Java, C++, Kotlin, Swift, PHP, Go
본문에 삽입됐을 때의 모습 (C++ 기준)

포스팅 한 후의 모습 (C++ 기준)
