티스토리에서 인용 코드 예쁘게 넣기

도아님의 블로그에서 자주 보던 형태였는데, 오늘에야 이걸 알았습니다~ 소스 코드를 강조할 때도 사용할 수 있고, 그냥 인용문을 명료하게 보여줄 때에도 유용한 것 같습니다. 티스토리에서 syntaxhighligter 의 사용법에 대해서는 하늘다래님의 블로그에 소스 넣기를 참조하면 잘 알 수 있습니다. (티스토리 테크북에도 나와있네요. 그외 다른 툴과의 통합은 이곳을 참조~)

view source

print?

1.한줄

2.두줄

저도 syntaxhighligter 에 익숙해질 겸, 기본적인 사용법과 몇 가지 응용법에 대해서 적어보려고 합니다. 

1. 문법 선택 (html, javascript, 등등)

• html 소스

view source

print?

1.<pre class="brush: html;"> 

2.html 코드를 넣을 때에는 html brush 를 사용합니다.

3.</pre>

view source

print?

1.<a href="http://mamom.tistory.com">마몸의 블로그 가기</a>

• c 코드 

view source

print?

1.<pre class="brush: c;"> 

2.c 소스 코드를 넣을 때에는 c brush 를 사용합니다.

3.</pre>

view source

print?

01.#include "stdafx.h"

02.#include <stdlib.h>

03. 

04.int main(int argc, char* argv[])

05.{

06.    int arg;

07. 

08.    if(argv[1]) {

09.        return atoi(argv[1]);

10.    }

11.     

12.    //printf("Select Running Options...:");

13.    printf("Select Connecting Options...:");

14.    scanf("%d", &arg);

15. 

16.    return arg;

17.}

• 일반 글 

view source

print?

1.<pre class="brush: plain;"> 

2.그냥 글을 넣고 싶다면 plain brush 를 사용합니다.

3.</pre>

view source

print?

1.첫번째 줄에서 하고 싶은 말을 하고,

2.두번째 줄부터 설명을 시작합니다.

이 외에 21가지 종류가 있는데 이곳에 가면 참조하여 사용할 수 있습니다. 혹시 이 21가지에 원하는 것이 없다면 포럼에서 찾아보거나, 요청하거나, 그도 아니면 가이드를 보고 직접 제작할 수 있습니다. (참고로 저도 도스 cmd 문법을 찾으려 포럼의 글을 보고, cmd 구문파일을 찾을 수 있었습니다.)

2. 박스 꾸미기

• 줄 번호 끄고 키기  

view source

print?

1.<pre class="brush: plain; gutter: false;"> 

2.줄번호를 보고 싶지 않다면 gutter: false; 를 넣어주면 됩니다.

3.</pre>

• 줄 강조하기 

view source

print?

1.<pre class="brush: plain; highlight: 3"> 

2.원하는 줄을 강조하고 싶다면,

3.highlight: 3와 같이원하는 라인을 넣어주면 됩니다.

4.</pre>

view source

print?

1.<pre class="brush: plain; highlight: [2, 4]"> 

2.한번에 여러 줄을 강조할 수도 있습니다.그럴 때에는 숫자 배열을 넣어줍니다.

3.highlight: [2, 4]과 같이 넣어줍니다.

4.아직 몇번째부터 몇번째까지를 강조하지는 못합니다.

5.원하는 라인을 하나하나 넣어주면 됩니다.

6.</pre>

• 가로 눈금 보이기 

view source

print?

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

1.<pre class="brush: plain; ruler: true"> 

2.혹시 가로자가 필요하시나요?

3.ruler: true 를 추가해서 한번 넣어봅니다.

4.</pre>

• 툴바 끄고 켜기 

1.<pre class="brush: plain; toolbar: false;"> 

2.마우스를 올려놓았을 때 나타나는 도구가 신경쓰이면, 한번 꺼봅시다.

3.toolbar: false; 입니다.

4.</pre>

• 시작 숫자 지정하기 

view source

print?

08.<pre class="brush: plain; first-line: 8"> 

09.시작 숫자를 바꿀 수 있네요. 중간에 인용할 때 유용하겠습니다.

10.first-line: 8 입니다.

11.</pre>

• 한줄 인용하기 

1.<pre class="brush: plain; light: true"> 

2.한줄 쓸 때 편하다고 합니다.

3.툴바도 없고, 줄번호도 없습니다.

4.light: true 입니다.

5.</pre>

• 섞어쓰기 

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

101.<pre class="brush: plain; ruler: true; highlight: 102; first-line: 101; toolbar: false;"> 

102.마지막으로 이 모든 것들은 각각 속성이므로 섞어서 사용할 수 있습니다.

103.가로자도 켜도, 줄도 강조해보고,

104.시작하는 숫자도 바꾸고, 툴바도 없애보았습니다.

105.속성이 충돌하는 것들은 어떻게 되는지 모르겠네요~

106.</pre>

3. 기타

2.0 버전 부터는 테마 바꾸기가 가능하다고 합니다~ Default 가 아닌 Emacs 테마입니다.

위에서도 말했듯이 다른 블로그에서 사용하기가 가능합니다. 

휴~ 네, 네, 마스터한 것 같습니다. 보람있네요~ ^^