http://alexgorbatchev.com/SyntaxHighlighter/
블로그에서 다들 이 사이트에 가서 다운로드 하면 된다고 하던데.. 잘 모르겠다ㅠ;;
그래서 그냥 압축파일 올릴테니 이거 다운 받으시고 따라오세요~
1. 압축파일을 저장하고 푼다(바탕화면이나 외장하드나 상관없어요!)
syntaxhighlighter_3.0.83.zip
2. Tistory에 파일을 업로드 한다.
(1) 티스토리 관리에서 HTML/CSS를 누른다.
(2) 파일업로드에서 추가 버튼을 눌러 압축풀었던 파일을 찾는다.
(3) 풀었던 압축파일 중 script파일과 styles파일 두개를 업로드 한다.
(+설명 : script는 사용할 언어를 지정하는 파일들 / styles는 스킨을 지정하는 파일들 이에요. 용량때문에 저 두 파일만 등록해야합니다!!!)
-> script파일들!! Ctrl+A를 눌러서 모두 열어야 해요!!
-> styles파일들!! Ctrl+A를 눌러서 모두 열어야 해요!!
그리곤 저장!!
여기까지 잘 따라 오셨나요?
그러면 이제 HTML과 CSS부분을 만져볼게요 ㅋㅋ
3. HTML에서 </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].getElementsByClassNam('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>
이 코드를 모두 복사해서 </head>바로 앞 부분에 복사해 넣어주세요~!!
4. <body>찾아서 코드 바꾸기
그리고, Ctrl+F를 이용해서 <body>부분을 찾으세요!!!<body id~어쩌구>라고 씌여있는 경우도 있음!
암튼, <body>를 찾으셨다면, 다음과 같이 덮어씌어주세요(바꿔주세요!)
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
5. Syntax Highlighter 적용법
이제 소스를 적용하여 글을 써 보겠습니다.
티스토리 글쓰기로 들어가서 HTML탭을 눌러줍니다.
그리고 <pre>태그법을 이용해 다음과 같이 작성해 주세요.(복붙)
<pre name="code" class="brush:원하는 언어;"> 에디터 모드에서 이 사이에 코드를 작성하면 된다.</pre>에디터 모드에서 이 사이에 코드를 작성하면 된다.
사용언어는 다음과 같이 쓸 수 있습니다.
끄읕!!!
+ 덧1) 스크롤바가 너무 귀찮으시면 Tistory관리 > HTML/CSS편집 으로 들어가서 맨 마지막 부분에 다음 코드를 삽입하면 불필요한 스크롤바를 제거하실 수 있습니다.
div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important;
'기타' 카테고리의 다른 글
| [자소서팁] 한국이름 영어식 표기 (0) | 2018.05.08 |
|---|