티스토리 소스코드 플러그인 - SyntaxHighlighter
- IT&TECH/티스토리
- 2016. 8. 12.
[ 티스토리 소스코드 이쁘게 올리는 방법 ]
작성자 : 릴라남편
SyntaxHighlighter 플러그인을 이용해서 티스토리 블로그에 다양한 소스코드를 이쁘게 올려보자.
해당 작업은 HTML 편집 및 소스코드 플러그인 파일들을 업로드해야한다.
겁먹지 말자. 단계별로 그대로 따라 하길 바란다. 쉽다. 10분만 집중해보자.
▶SyntaxHighlighter 3.0.83 다운로드
[ 다운로드 페이지 바로 가기 ]
위 URL을 클릭하자. 해당 페이지에서 다운로드가 가능하다.
▶ 티스토리에 플러그인 업로드
티스토리에서 해당 플러그인을 사용하는 데 필요한 파일들을 업로드해야할 시간이다.
내려받은 Syntax Highlighter 압축파일의 압축을 풀자.
압축을 풀면 다음과 같은 내용물이 보일 것이다. 이 중에서 "scripts" 와 "styles" 만 필요하다. 이 녀석들에게 집중하자.
이제 티스토리의 파일 업로드 기능을 이용해서 파일들을 업로드해보자.
① scripts 폴더 내 모든 파일 업로드
소제목 그대로 scripts 폴더에 포함된 모든 파일을 업로드하자.
② styles 폴더 내 적용하고 싶은 테마 파일 부분 업로드
사실 styles 폴더도 scripts 폴더와 마찬가지로 모든 파일을 업로드해도 무관하다.
하지만 굳이 사용하지도 않을 파일들까지 업로드할 필요는 없다. ( 비록 몇 KB 차이일지라도 말이다. )
따라서 본인이 사용할 테마의 .css 파일만 업로드하자.
여기서 중요한 건 "shCore.css" 파일은 반드시 올려야 한다.
정리하면 [ shCore.css + 적용할 테마 Core.css + 적용할 테마Theme.css ] 이렇게 세트로 묶어서 가자.
필자는 default / eclipse / emacs 테마를 선택했다.
▶ HTML 편집
겁내지 말자. 필자처럼 초보인 분들은 반드시 HTML의 내용을 메모장 같은 곳에 백업해놓고 작업하길 바란다.
우선, [ Ctrl+F ]로 "/head"를 검색하자. 해당 라인 바로 위에 다음 내용을 복사/붙여넣기를 하자.
<script type="text/javascript" src="./images/shCore.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/shBrushJScript.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>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
여기서 중요한 여러분들이 수정해야 할 라인이 있다.
바로 어떤 테마를 사용할지 지정해줘야 한다. 눈치가 빠른 분은 이미 알아챘으리라 생각한다.
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
위에서 자신이 업로드한 테마.css 파일명으로 바꿔주면 된다.
이제 마지막이다.
이번엔 [ Ctrl+F ]로 "body"를 검색하자. ( 사실 /head 바로 아랫부분에 있으므로 금방 찾을 수 있다. )
<body>를 다음과 같이 바꿔주면 된다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
여기서 잠깐! 필자처럼 <body>만 달랑 있는 형태가 아닐 때는 당황하지 말고,
Onload="dp.SyntaxHighlighter.HighlightAll('code');" 만 추가해주면 된다.
우측 상단 "저장" 버튼을 누르고 설정을 마무리하자.
▶ 티스토리 소스코드 업로드
플러그인을 적용했다면 이제 사용해볼 차례다.
글쓰기 컴포넌트 우측에 위치한 "HTML" 편집 모드로 변경하는 체크박스를 눌러주자.
필자는 <pre> 대신 <textarea> 를 사용했다. 다음과 같이 샘플 코드를 입력하자.
<textarea name="code" class="brush:cpp;">
#include <stdio.h>
int main(void)
{
printf("Hi");
return 0;
}
</textarea>
결과물은 다음과 같다.
필자가 적용한 emacs 테마가 제대로 적용된 모습이다.
지원하는 언어는 다음과 같다. "brush:cpp;" 에서 cpp 대신 원하는 녀석을 선택하면 된다.
포스팅 서두에서 언급했듯이 10분 정도면 필자 같은 초보자도 쉽게 Syntax Highlighter를 티스토리에 적용할 수 있다.
감사합니다.
'IT&TECH > 티스토리' 카테고리의 다른 글
| [티스토리 구글 검색] 블로그 이름과 제목 순서 바꾸기 (3) | 2017.02.28 |
|---|---|
| 티스토리 구글 애드센스 넣기! 넘나 쉬운 것! (0) | 2016.09.22 |
| 티스토리 구글 검색 노출시키는 방법 (12) | 2016.08.03 |
| 티스토리 맞춤법 검사 (0) | 2016.08.01 |
| 티스토리 글씨체 간단하게 바꾸는 방법 (0) | 2016.08.01 |