소스코드 플러그인 적용하기 (syntaxhighlighter)
- OLIDANG/블로그관리설정
- 2018. 9. 29. 21:38
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- RSS 방지선 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. 소스코드 하이라이트 다운로드 ( v3.0.83)
syntaxhighlighter_3.0.83.zip2. 파일 업로드하기
1) 티스토리 블로그관리 페이지 이동
2) 꾸미기 > 스킨편집 이동
3) 파일업로드 선택
4) scripts, styles 폴더 안에 있는 파일 전체 업로드하고 저장
3. HTML 소스코드 수정
1) 티스토리 블로그관리 페이지 이동
2) 꾸미기 > 스킨편집 이동
3) HTML 선택
5) </head> 코드 바로 위에 script 코드를 삽입
<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();
// 줄바꿈을 안하실 분들은 여기 부터 생략하세요.
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>
6) <body> 를 아래와 같이 변경. </head> 바로 아래 위치함.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
7) 세로 스크롤바 숨김처리 하기 </html> 바로 위에 입력할 것
<style>
.syntaxhighlighter {
overflow-y: hidden !important;
}
4. 플러그인 사용하는 방법
1) 본문 html 내에 직접 작성하는 방법 (brush: 옆에는 적용할 언어를 입력)
<pre name="code" class="brush:xml;">쓸 내용 입력1
쓸 내용 입력2
</pre>
2) 언어관련 참조
3) 서식에서 사용하는 방법
- 글쓰기 시에 서식란에 있는 소스코드 서식을 불러와 사용한다.
- 소스코드 안에서 줄바꿈을 할 시에는 반드시 Shift+Enter 로 줄바꿈하도록 한다.
'OLIDANG > 블로그관리설정' 카테고리의 다른 글
| 블로그 관리페이지 설정하기 (중요내역) (0) | 2018.09.29 |
|---|