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

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

한줄
두줄

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

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

• html 소스

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

마몸의 블로그 가기

• c 코드 

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

#include "stdafx.h"
#include <stdlib.h>

int main(int argc, char* argv[])
{
	int arg;

	if(argv[1]) {
		return atoi(argv[1]);
	}
	
	//printf("Select Running Options...:");
	printf("Select Connecting Options...:");
	scanf("%d", &arg);

	return arg;
}

• 일반 글 

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

첫번째 줄에서 하고 싶은 말을 하고,
두번째 줄부터 설명을 시작합니다.

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

2. 박스 꾸미기

• 줄 번호 끄고 키기  

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

• 줄 강조하기 

 
원하는 줄을 강조하고 싶다면,
highlight: 3와 같이원하는 라인을 넣어주면 됩니다.

 
한번에 여러 줄을 강조할 수도 있습니다.그럴 때에는 숫자 배열을 넣어줍니다.
highlight: [2, 4]과 같이 넣어줍니다.
아직 몇번째부터 몇번째까지를 강조하지는 못합니다.
원하는 라인을 하나하나 넣어주면 됩니다.

• 가로 눈금 보이기 

 
혹시 가로자가 필요하시나요?
ruler: true 를 추가해서 한번 넣어봅니다.

• 툴바 끄고 켜기 

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

• 시작 숫자 지정하기 

 
시작 숫자를 바꿀 수 있네요. 중간에 인용할 때 유용하겠습니다.
first-line: 8 입니다.

• 한줄 인용하기 

 
한줄 쓸 때 편하다고 합니다. 
툴바도 없고, 줄번호도 없습니다.
light: true 입니다.

• 섞어쓰기 

 
마지막으로 이 모든 것들은 각각 속성이므로 섞어서 사용할 수 있습니다. 
가로자도 켜도, 줄도 강조해보고,
시작하는 숫자도 바꾸고, 툴바도 없애보았습니다.
속성이 충돌하는 것들은 어떻게 되는지 모르겠네요~

3. 기타

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

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

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