티스토리 블로그를 사용하다 보면 소스 코드를 추가해야 할 때가 있습니다. 예를 들면, 프로그래밍 강좌를 할 때에는 소스 코드가 필수죠. 네이버는 스마트 에디터 3.0으로 넘어가면서 자체적으로 지원을 하는 것 같지만 티스토리는 따로 지원하는 게 없네요. 그래서 따로 설정을 해 줘야 하는데요, SyntaxHighlighter를 적용했습니다.
먼저 SyntaxHighlighter 파일을 받아 줍시다. 아래 첨부해둔 파일을 받은 뒤 압축을 풀어주세요. 여러 가지 파일들이 있는데요, 여기서 필요한 건 "scripts"와 "styles" 이 두 파일입니다.
syntaxhighlighter_3.0.83.zip
그다음 티스토리 관리자 페이지로 들어가 줍시다. 왼쪽 메뉴 중에서 "꾸미기 > 스킨 편집"을 클릭해서 스킨 편집 창을 열어줍시다.
오른쪽에 있는 "html 편집" 버튼을 클릭해 주세요.
이제 아까 압축을 풀었던 파일들을 업로드 시켜야 합니다. "파일 업로드"로 들어간 뒤 아래에 있는 "+추가"버튼을 클릭해 주세요.
아까 말했듯이 "scripts"와 "styles"만 있으면 됩니다. 이 두 파일을 업로드해 주세요.
파일을 업로드했으면 코드를 추가해야 합니다. "HTML"로 이동한 뒤 <head>와 </head> 사이에 아래 코드를 입력해 주세요.
<link href="./images/shCore.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.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/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.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">
SyntaxHighlighter.defaults["toolbar"] = false; // 툴바없애기
SyntaxHighlighter.defaults["auto-links"] = false; // 자동 링크없애기
SyntaxHighlighter.defaults["tab-size"] = 2; // 탭사이즈를 2로 설정
SyntaxHighlighter.all();
</script>
설정은 다 끝났네요. 적용만 하면 되는데요, 아래 코드처럼 <pre>와 </pre> 사이에 원하는 코드를 추가하시면 됩니다.
<pre class="brush:html">
이런 식으로 추가하시면 됩니다
</pre>
조만간 티스토리 스킨을 만들어 보면서 동시에 포스팅을 하려고 하기 때문에 SyntaxHighlighter를 설치하게 됐네요. 티스토리는 언제쯤 자체적으로 지원을 할까요...
'블로그 이야기 > 블로그 강좌' 카테고리의 다른 글
| 블로그 자료들을 백업할 수 있는 무료 온라인 클라우드 5개 (2) | 2018.04.19 |
|---|---|
| 블로그 자료들을 백업하자! 구글 드라이브 (0) | 2018.04.17 |
| 네이버 블로그와 티스토리 블로그, 어떤 블로그가 더 좋을까? (6) | 2018.03.31 |
| 블로그 꾸미기 팁 #3, 구독 버튼 만들기 - 네이버 (3) | 2018.02.25 |
| 티스토리 블로그 꾸미기 팁 #2, 폰트 바꾸기 (1) | 2018.02.23 |
