SyntaxHighlighter 본격 적용
우선 우리들은 이전 글에서 간단히 소스코드로만 이루어진 javascript만 하이라이팅 해주는 것만 했었습니다.
하지만! 저희는 만능 프로그래머로 거듭날 사람들!!!!
이대로 자바스크립트만 사용하다 썩을순(?) 없죠.
그래서! 다양한 프로그래밍 언어(C,C++,C#,PHP etc...)들을 본격 하이라이팅 해봅시다.
우선 여러분이 하셔야 할 건 음...
블로그는 다있죠? ㅋㅋㅋㅋㅋㅋ 농담입니다.. 하..
먼저 SyntaxHighlighter 사이트로 가셔서 다운 받아 줍시다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
여기서 "Click here to download" 라는 글씨를 클릭하셔서 다운받아줍니다.
그거아세요? 저도 차근차근 이 글 쓰면서 같이 하고 있답니다.ㅋㅋ~
syntaxhighlighter_3.0.83.zip다 다운 받으셨다면, 압축풀고 폴더안에 들어가보세요.
저 같은 경우에는 폴더 이름이 'syntaxhighlighter_3.0.83' 이네요.
이렇게 두개의 폴더가 나오는데, scripts 폴더와 style 폴더. 이렇게 두개의 폴더만 있으면 됩니다.
1. 티스토리의 HTML/CSS 편집기에 들어가줍니다.
그리고 나서 파일업로드 탭에 들어가줍니다.
그러면 업로드 할 수 있는 버튼이 생길텐데 클릭 합니다. (추가)
이 스크립트에는 하이라이팅 해주는 언어들을 선택할 수 있습니다.
우리는 만능 프로그래머이니까 모두 넣어줍시다.
모두! 업로드(추가) 시켜 주십시오!
※ 참고. 용량이 꽤 됩니다. 
2. 테마(스킨) 스타일 정하기
앞서서 테마종류는 몇가지 보셨죠? 못보신 분들을 위해 사이트 남깁니다.
2017/02/22 - [Web/Tistory(blog)] - 개발자들을 위한 소스코드 하이라이터~
가보시면 몇가지 코드들이 예시로 있을겁니다.
이번엔 styles 폴더로 들어가 봅니다.
다양한 테마가 있는데 이들 중 낯익은 스킨들이 몇몇 보이네요?
네. 저는 낯익은 스킨들만 선택했습니다.
저기 빨간 부분의 shCore.css 파일은 반드시 업로드 해야 합니다.
그리고, 나머지 라임색들은 선택사항입니다.
주의 할 점이 있습니다.
짝을 지어줘야 합니다.
★shCore.css - shCoreDefault.css - shThemeDefault.css
이렇게 Core는 기본이고 코어와 테마 둘다 짝지어줘야합니다.
저는 Default와 Emacs, Eclips 테마를 정했습니다. 낯익잖아요?
그리고 참고로 반드시! 필요한 테마만 넣으세요. 아까도 말했다시피 용량이 꽤 됩니다.
나중을 위해서 공간 많이 남겨두세요. (티스토리 업로드 용량이 20MB로 한정 되어있습니다.)
자! 이렇게 업로드는 모두 끝났습니다.
본격적으로 티스토리의 코드를 수정해줘야 완벽해집니다!
우리는 이제 시작입니다~~
우선 이전에 우리는 소스코드로 간단히 업로드 하지않고 소스코드를 사용했었죠?
이걸 지워줘야 할겁니다. (충돌되지 않게 하기위해... 충돌 너무 무서워요.)
이 부분을 지워 줍니다. (또는 주석처리... 주석처리는 <!-- -->)
그 후에 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>
하.. 무지 힘드네요. 다 썻다니... (혹여 틀린 부분 지적 해주세요. 이게 틀리면 저도 틀려서 블로그에 오류나거든요 ㅋㅋ)
여기서 간단히 코드를 해석해보면 위의 script코드들은 지원할 언어를 구현하는 코드이구요.
밑의
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
이 코드가 사실상 제일 중요합니다.
<link type="text/css" rel="stylesheet" href="./images/당신이 진정 원하는 스킨테마">
이곳을 아까 업로드한 스킨중 하나를 적습니다. 저는 아까 보자...
shThemeDefault.css, shThemeEclipse.css, shThemeEmacs.css 이 세가지를 업로드 했으니까 이 세가지중 하나를 쓸껀데...
저는 Emacs를 사용하겠습니다.
이제 거의 다왔습니다.
Ctrl+F를 사용하여 body부분을 찾아줍니다. 참고로 body는 대부분 </head> 바로 뒤에 있습니다.
찾으셨다면 .. <body>를 아래 코드 처럼 변경합니다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
body에 소스코드를 조금 추가했을 뿐입니다.;;
만약 저의 경우 처럼 body부분에 이미 무언가 추가 되어있다면... 어떻게 해야할까여?
이럴 경우에는 그냥 아래처럼 해줍니다. 그냥 추가만 하면 됩니다. (저의 경우 치환자가 붙어있네요 ㅋㅋㅋ)
<body id="tt-body-page" Onload="dp.SyntaxHighlighter.HighlightAll('code');">
해결 되셨나요?
자!!! 이제 다끝났습니다. 하하하하핳ㅎ핳ㅎ!!
이제 직접 게시글을 작성 해볼텐데...
우리는 모든 티스토리 자체HTML을 변경했습니다.
이제 글을 작성하면 하이라이팅이 뜨면 완벽하겠죠?
하이라이팅을 위해서 작성팁!(꼭 이래야만 하는듯...)
2017/02/22 - [Web/Tistory(blog)] - 개발자들을 위한 소스코드 하이라이터~
여기 가서 보셔도 되지만 제가 다시한번 설명드릴게요.(여러분들을 위해서라면... ;;)
자! 하이라이팅을 하기위해선 HTML을 체크하고
하이라이팅할 코드를 적습니다.
예를들어 <a style="color:black;"> limeㅠ </a>를 적고 싶다.... (이 코드가 맞나싶네..) 하시면
그러면 HTML을 체크하고, 아래와 같이 입력해줍니다.
<Case 1>
<pre class="brush: js;">
<a style="color:black;"> limeㅠ </a>
</pre>
<Case 2>
<textarea name="code" class="brush:js;">
<a style="color:black;"> limeㅠ </a>
</textarea>
이렇게 표현 될 수 있습니다.
brush: 이부분은 뭐냐고요? 바로 하이라이팅을 적용시킬 언어종류를 식별하는 겁니다.
내가 쓰는 언어가 C언어이면 c,cpp를 입력하면 되고 js는 자바스크립트인데...
자세한건 2017/02/22 - [Web/Tistory(blog)] - 개발자들을 위한 소스코드 하이라이터~ 여기를 참고 해주세요~
이제 전에 다하지못한 오류가 나고, 하이라이팅이 안되던 C언어를 프로그래밍 해 볼게요.
<textarea name="code" class="brush:cpp;">
#include <stdio.h>
int main(void){
printf("Hello World!\n");
return 0;
</textarea>
과연 HelloWorld! 예제의 하이라이팅이 될까여? (이번건 textarea라는 걸 사용 했습니다.)
textarea는 창의 크기를 내맘대로 조절할 수 있는 점이 pre랑 다른거 같습니다.
이번에는 pre를 사용해서 해볼까요?
<pre class="brush: cpp;">
#include <stdio.h>
int main(void){
printf("Hello World! \n");
return 0;
}
</pre>
#includeint main(void){ printf("Hello World! \n"); return 0; }
아... 드디어 다썻다~~~
전 독자분들을 위해서라면 뭐든(?) 할 수 있습니다.ㅇㅇㅇㅇㅇ;;
여러분도 같이 하신다고 욕보셨고.. 참고로 저도 이글 쓰면서 같이 했아여~
처음 했던거라 힘들었고 불안한점이 많아서 두려웠는데 잘끝내고 구동 잘되서 정말 다행이네요~
예쁜 소스코드 많이 쓰세요^^
