Other/Tistory

[Tistory]SyntaxHighlighter로 소스코드 강조하기

푸고배 2020. 12. 31. 15:03

Tistory 새 에디터에는 아래와 같이 코드블럭이라는 기능을 이용해서 간단하게 소스코드를 추가할 수 있다.

하지만 구 에디터는 별도의 플러그인이 필요하다.

SyntaxHighlighter

Download : SyntaxHighlighter Github

 

Releases · syntaxhighlighter/syntaxhighlighter

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. - syntaxhighlighter/syntaxhighlighter

github.com

Source code(zip/tar.gz)를 다운받은 후, 압축을 해제한다.

파일의 구조는 다음과 같으며, 이 중 scripts와 styles가 필요하다.

scripts styles에 들어있는 파일을 전부 Tistory 관리자 페이지의 스킨편집의 파일업로드에 올린다.

scripts와 styles 적용을 위해 HTML의 <head></head> 태그 상단에 다음과 같은 소스코드를 추가해준다.

<link type="text/css" rel="Stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushCss.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/shBrushSass.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>	
<script type="text/javascript">SyntaxHighlighter.all();</script>

그 다음 강조할 소스코드를 다음 태그 안에 넣어주면 된다.

<pre class="brush:언어종류">
	소스 코드
</pre>

 

반응형