본문 바로가기
Tistory 운영

[Tistory] SyntaxHighlighter v3 적용

by 까망 하르방 2021. 2. 15.
반응형
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에서 소스코드 입력시 '<', '>'  꺽쇠 모양은

각각 『 &lt; 』, 『 &gt; 』 으로 전환해야 정상 적용된다.

 

※ 자동 꺽쇠 변환 사이트

 

HTML < ... > converter

HTML < ... > converter

parkjuwan.dothome.co.kr

 

반응형

댓글