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>
반응형
'Other > Tistory' 카테고리의 다른 글
| [Adsense] 수익계좌 연결을 위해 SC제일은행 외화통장 만들기 (0) | 2021.06.01 |
|---|---|
| [Tistory] 애드센스 광고 영역 CSS로 꾸미기 (0) | 2021.02.28 |
| [Google analytics] 애드센스 무효 트래픽 ip 추적하기 (0) | 2021.02.12 |
| [Google analytics] 티스토리에 구글 애널리틱스 연동하기 (3) | 2021.01.09 |
| [KaKao AdFit] 카카오 애드핏으로 블로그 광고 수입내기 (2) | 2021.01.05 |
댓글