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>
반응형