[블로그 관리] 블로그(티스토리)에 소스 코드 넣기

http://kr.deoker.com/101


http://choboyam.tistory.com/1 

블로그에 소스 코드를 넣는 이유는 아래와 같이 소스 코드를 기록하거나 알려 드릴경우 좀더 보기 좋고 코드 부분만 드레그엔 드롭이 가능하게 만들기 위해 사용합니다.

C TEST

?

1 2 3 4 5 6 7 8 9

Code Start   #include<stdio.h> int main(int argc,char *argv[]) {    printf("Hello World\n"); }   Code End

CPP TEST

?

1 2 3 4 5 6 7 8 9 10 11 12 13

Code Start   #include<iostream> using namespace std;   int main(int argc,char *argv[]) {   cout<<"HelloWorld"<<endl;<br>   return 0; }   Code End </iostream>

위의 코드는 만국 공통 만컴 공통 예제인 Hello World입니다.(이것을 모른다면 당신은.. 일반인..)

 위와 같이 코드를 넣기 위해서는 우선 이러한 기능을 만들어 주신 분들께 감사를드리며(?! 홈페이지에 가면 Donate가 있습니다. 하지만 저는 마음만으로 감사 드리겠습니다.)

 링크 에 접속하여 SyntaxHightlighter를 다운 받아 주시기 바랍니다.(저는 최신 버전인 3.0.83을 받았습니다.)

 다운 받으신 파일의 압축을 풀어 주시면 Script(code관리) 와 Styles(css관리) 가 있습니다.
이중에서 자신이 필요한 부분을 티스토리의 image에 올려 주시기 바랍니다.(저 같은경우 전부다 올려 버렸습니다.)

스킨 -> HTML/CSS편집 -> 파일 업로드 -> 파일 업로드
를 이용하여 올리 주시면됩니다.

그런후 HTML/CSS 설정으로 가셔서 </body> 바로 윗부분에

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Code Start <!-- SyntaxHighlighter // --> <script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shAutoloader.js"></script> <script type="text/javascript"> //<![CDATA[ SyntaxHighlighter.autoloader(    'actionscript3 as3      ./images/shBrushAS3.js',    'bash shell             ./images/shBrushBash.js',    'cpp c                  ./images/shBrushCpp.js',    'c# c-sharp csharp      ./images/shBrushCSharp.js',    'css                    ./images/shBrushCss.js',    'diff patch pas         ./images/shBrushDiff.js',    'java                   ./images/shBrushJava.js',    'jfx javafx             ./images/shBrushJavaFX.js',    'js jscript javascript  ./images/shBrushJScript.js',    'php                    ./images/shBrushPhp.js',    'text plain             ./images/shBrushPlain.js',    'py python              ./images/shBrushPython.js',    'sql                    ./images/shBrushSql.js',    'xml xhtml xslt html    ./images/shBrushXml.js' );    // SyntaxHighlighter.config.bloggerMode = true;    // SyntaxHighlighter.config.stripBrs = true;    // SyntaxHighlighter.defaults['html-script'] = True;    SyntaxHighlighter.all(); //]]> </script> <!-- // SyntaxHighlighter --> Code End

위의 코드를 넣어 주시면 일단 설정은 완료된 것입니다.

그런 후 코드를 넣으실때 에는 편집기에서 HTML모드로 만드신후

HTML 모드에서 아레와 같은 코드를 넣으 신후 HTML모드를 해제 하시고 그 안에 코드를 넣어 주시면 됩니다.

제 가 쓴것들을 보시면 아시 겠지만 저는 Code Start와 Code End로 HTML 모드가 아닐때 코드를 넣어 줄 부분을 구분합니다. 만약 HTML모드에서 넣으시게 되면 C언어의 경우 #include<stdio.h> 같은 부분에서 <stdio.h>를 테그로 인식하여 끝 테그</stdio.h>를 멋대로 달아 버리기 때문입니다.
  

?

1 2 3 4 5 6 7 8

Code Start <pre class="brush:원하는 언어"><br>   <!-- 원하는 sytle를 로드후 --><br>   <link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" /><br>   <br>   <!-- 이곳에 코드 를 넣어주세요 --><br> </pre> Code End

html부분에 위와 같이 적어 주시고 그 안에(저 같은경우 Code Start와 Code End 사이) 코드를 넣어 주시면 됩니다.

각 모드별 Brush 는
아래와 같습니다 원하는 코드에 Brush aliases를 class="brush:이곳"에 넣어 주시면됩니다.

옆의 js의 경우 Brush를 관리하는 Javascript입니다.

즐거운 블로깅 되시기 바랍니다 :D