[Tistory] SyntaxHighlighter v3 적용

Tistory에 가독성을 위해 아래와 같이 Code를 첨부하는 경우가 많다.
이번 내용은 SyntaxHighlighter를 이용하여 Code 올리는 방법입니다.

아래 사이트에서 style(.css) / scripts(.js) 파일 다운받아 압축해제

* 파일의 경우 공식 사이트에서 정상 파일 권장

Tistory 관리자창에서 [스킨편집] 선택

[html 편집] 선택

① [파일 업로드] 탭에서 ② [추가] 선택

③ 다운받은 파일에서 [scripts], [styles] 파일을

모두 ④ 업로드 한 후, ⑤ [적용]

※ 파일을 업로드하면 위치가 image/ 경로

- [HTML] 탭에서 <head> 태그 마지막 부분에 css 코드 추가

※ 마음에 드는 테마의 css 코드 추가

<link type="text/css" rel="stylesheet" href="./images/shCoreRDark.css">

- <body> 태그 마지막 부분에 js 코드 추가

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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" src="./images/shLegacy.js"></script>
<script type="text/javascript"> SyntaxHighlighter.all();</script>

사용방법

[글 작성 시] HTML 편집 모드에서 아래와 같이

html 코드와 올리고 싶은 Code 내용을 작성

※ brush 속성에 필요한 언어 기재

<pre class="brush: java">
/*코드내용*/
</pre>

HTML에서 소스코드 입력시 '<', '>' 꺽쇠 모양은

각각 『 < 』, 『 > 』 으로 전환해야 정상 적용된다.

※ 자동 꺽쇠 변환 사이트

HTML < ... > converter

parkjuwan.dothome.co.kr

저작자표시 비영리 변경금지

'Tistory 운영' 카테고리의 다른 글

[Tistory] Code Block 가로 스크롤 (0)	2021.02.15
[Tistory] Syntaxhighlighter v4 적용 (0)	2021.02.15
[Tistory] [Code Block] Color Scripter 이용하기 (0)	2021.02.15
[Tistory] Syntax Highlight 플러그인 적용 (0)	2021.02.15
[Tistory] [Code Block] Gist를 이용한 소스코드 올리기 (0)	2021.02.15