티스토리에서 syntaxhighlighter 3.0.83 설치하기

설치

0. syntaxhighlighter를 다운로드 한 뒤 압축을 푼다.

SyntaxHighlighter_v3.0.83.zip

1. 블로그 관리 화면에서 꾸미기 - 스킨 편집으로 진입한다.
※ 블로그주소/manage/design/skin/edit#/

2. 우측 상단에 html 편집 버튼 클릭

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

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

5. HTML 탭으로 이동한다.

6. </head> 위에 아래 태그를 입력한 후 오른쪽 상단 구석에 있는 [적용] 버튼을 누른다.

<!-- SyntaxHighlighter 설정 시작-->
<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>
<!-- SyntaxHighlighter 설정 끝-->

사용 방법

코드를 삽입하고 싶은 구간에 아래 내용을 입력한다.

<pre class="brush:언어">
</pre>

위와 같이 작성하면 본문에 아래와 같은 회색박스가 생긴다.
회색박스가 위치한 공간에 코드를 작성한 후 발행하면 된다.

html 모드에서 직접 코드를 작성할 경우 <, > 같이 태그에서 사용하는 특수문자가 제대로 표기되지 않으므로 코드는 에디터 모드에서 입력하는 것을 권장한다.

코드작성공간

참고로 일반 붙여넣기를 하거나 직접 작성하는 경우 <pre> 태그 사이에 <p> 태그가 추가되어 위에 출력되는 예제처럼 실제 출력 시에 <p></p> 태그가 출력된다. 글 작성 시 이 부분에 대해 체크할 필요가 있다.

---

참고 - 티스토리 코드블럭

티스토리의 새로운 글쓰기에는 코드블럭을 삽입할 수 있는 자체 기능이 있다.
티스토리에서 공식적으로 지원하는 기능인만큼 별도의 설치가 필요 없고 사용하기 쉽다는 장점이 있지만
새로운 글쓰기에서만 지원되는 기능이고, 별도의 커스터마이징을 할 수 없다.

사용 방법은 아래와 같다.

0. 블로그 설정에서 콘텐츠 - 설정으로 진입한 후 새로운 글쓰기를 [사용합니다]를 선택 후 [변경사항 저장]을 클릭한다.

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

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

지원 언어: HTML, CSS, Javascript, Python, Java, C++, Kotlin, Swift, PHP, Go

본문에 삽입됐을 때의 모습 (C++ 기준)

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