TStory 블로그 작성을 시작하다 소스 코드가 보기 쉽게 표시 될 수 있는 방법이 필요했다.
소스 입력기? 소스 편집기? 코드 입력기? 뭐 이런걸 발견했다.
먼저 Syntax Highlighter
설치 방법과 적용 방법을 천천히 따라해 보자.
1. Syntax Highlighter 다운받기
파일은 최신 파일을 받아서 사용할 수도 있지만 3.0.83버전을 사용하자. (별 차이가 없다)
GitHub에서 최신 버전을 받아 사용하려고 했다가 SASS 파일을 CSS 파일로 컴파일 해야 되는 상황이 발생되었다.
최신 파일을 받아 컴파일해서 사용하려면 아래 글을 참고 해야 될 것이다.
SASS 파일을 CSS 파일로 컴파일 : http://startup-blog.tistory.com/5
다운로드는 아래 경로를 참고 하자. 최신 릴리즈된 버전은 3.0.90 이다.
개발자 사이트 : http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
syntaxhighlighter_3.0.83.zip2. 파일 업로드
압축을 풀면 화면과 같은 내용이 나온다. src 폴더의 자료를 티스토리 CSS 편집에 업로드 하겠다.
<3.0.90 파일의 내용>
src 폴더안의 sass 파일들을 css 파일로 컴파일을 해야 사용할 수 있다.
<3.0.83 파일의 내용>
scripts폴더와 styles폴더를 확인 할 수있다.
티스토리 관리페이지로 이동 한다. (http://www.tistory.com/ -> 본인블로그.tistory.com/admin/center/)
HTML/CSS 편집을 클릭한다. 그러면 새로운 창이 표시된다. 왼쪽 상단의 파일업로드를 클릭하면 하단에 추가 버튼이 보인다. 추가 버튼을 클릭
다운로드 받은 파일에서 'scripts' 폴더의 모든 파일과 'styles' 폴더에 있는 모든 파일을 선택 하여 업로드를 수행 한다.
3. 스킨 HTML 편집
HTML 편집 화면으로 넘어간다. 그리고 <head></head> 사이에 아래 소스를 추가한다.
그리고 저장을 눌러 완료 한다.
소스
<link href="./images/shCore.css" rel="stylesheet" type="text/css"/>
<link href="./images/shThemeEmacs.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();
// 줄바꿈을 안하실 분들은 여기 부터 생략하세요.
function SyntaxlineWrap(){ // 줄바꿈을 위한 스크립트
var wrap = function () {
var elems = document.getElementsByClassName('syntaxhighlighter');
for (var j = 0; j < elems.length; ++j) {
var sh = elems[j];
var gLines = sh.getElementsByClassName('gutter')[0].getElementsByClassName('line');
var cLines = sh.getElementsByClassName('code')[0].getElementsByClassName('line');
var stand = 20;
for (var i = 0; i < gLines.length; ++i) {
var h = $(cLines[i]).height();
if (h != stand) {
console.log(i);
gLines[i].setAttribute('style', 'height:' + h + 'px !important;');
}
}
}
};
var whenReady = function () {
if ($('.syntaxhighlighter').length === 0) {
setTimeout(whenReady, 800);
} else {
wrap();
}
};
whenReady();
}
$(function(){
$(window).bind("load resize", function(){
SyntaxlineWrap();
});
});
</script>
소스의 두번째 라인은 테마를 설정한다. 현재 shThemeEmacs 테마를 적용 중이다.
<shThemeDefault>
<shThemeDjango>
<shThemeEclipse>
<shThemeEmacs>
<shThemeFadeToGrey>
<shThemeMidnight>
<shThemeRDark>
4. 사용하기
사용하기 위해선 글쓰기에서 HTML 모드로 보기를 한다음 아래 코드를 삽입한다.
<pre class="brush: html">
<script type="text/javascript">
alert("Hello World");
</script>
</pre>
<script type="text/javascript">
alert("Hello World");
</script>
'TStory 시작하기' 카테고리의 다른 글
| 구글 애드센스 납세자 거주지 증명서 발급방법 (0) | 2024.11.13 |
|---|---|
| 티스토리 우클릭 드래그 복사 방지 방법 (1) | 2017.05.30 |
| 크롬에서 티스토리 임시저장 안될때 (0) | 2017.05.28 |
