도아님의 블로그에서 자주 보던 형태였는데, 오늘에야 이걸 알았습니다~ 소스 코드를 강조할 때도 사용할 수 있고, 그냥 인용문을 명료하게 보여줄 때에도 유용한 것 같습니다. 티스토리에서 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 테마입니다.

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

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

소통하길 원하시나요? 한 줄 댓글로도 충분합니다.

  1. 2009/12/18 10:37
    좋은 정보네요 감사합니다^^
    • 2009/12/18 13:27
      댓글 주소 수정/삭제
      네~ 블로그 들어가보니 아이폰 개발에 관심이 있으신가 보네요?
      아이폰은 없지만, 어떻게 흘러가나 관심있게 지켜보겠습니다.

      그럼~~
  2. 2010/01/13 21:48
    기본 글자 크기는 어떻게 조정해야하는지 궁금합니다!^^
    해보니깐 저는 글자크기가 작게나오네요ㅠ_ㅠ
    • 2010/01/14 02:38
      댓글 주소 수정/삭제
      SyntaxHighlighter 설정( http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration ) 을 찾아보아도 폰트 크기를 설정하는 항목은 찾을 수 없네요.

      HyungSee님 블로그 가서 보니깐 진짜 작게 나오네요... TEXTAREA 코드를 <div class="article"> 가 둘러싸고 있는데, article 속성을 상속받지 않았나 싶습니다. 저는 SyntaxHighlighter 에 따로 설정한 것은 없고, 대신 블로그 스킨 css 설정에서 아래와 같이 본문 글씨 크기를 늘리긴 했습니다. 참고가 되었으면 좋겠습니다~

      /* content > entryNotice, entryProtected, entry 본문 */
      .content .article{ width:/*@post-width:200=*/ 700px /*@*/; overflow:hidden; letter-spacing:0; margin-top:10px; /*@post-body-font-size=font-size:;*/ font-size: 14px; /*@*/ /*@post-body-font-family=font-family:;*/ font-family: inherit; /*@*/ /*@post-body-color=color:;*/ color: ; /*@*/ }

      .article 속성을 변경해서 본문 전체 크기가 바뀌는 게 맘에 들지 않는다면, HyungSee님이 SyntaxHighlighter를 사용하는 태그인 <TEXTAREA class=javascript name=code> 에서 적절한 구별자를 골라서 스타일을 하나 지정하는 방법도 있겠네요. 스타일 시트는 저도 어떻게 쓰는지 잘 몰라서, 자세한 내용은^^; 그럼, 잘 되길 바랍니다~
  3. 2010/01/14 11:43
    감사합니다 스타일시트크기로 바꿔봐야겠네요!~~
    아참 그리고 또 제블로그꺼는 마몸님 블로그와다르게
    코드상단에 View Plain같은게 나오는데 마몸님 블로그는 마우스 오버시 나오네요
    그것도 설정을 변경해야하는건가요?
    • 2010/01/14 16:13
      댓글 주소 수정/삭제
      네^^~ HyungSee 님 덕분에 SyntaxHighlighter 설정들을 다시 볼 수 있었습니다. 예전에는 막 설정을 넣었는데, config 의 의미를 다시 잘 알 수 있는 기회가 되었어요.

      툴바가 text 로 나오는 것과 icon 으로 나오는 것이 정말 다르네요~ 이런 저런 설정을 바꾸어 봤는데, 제 것은 원래 그랬던 것 같아요. 툴바에 있는 '?' 를 클릭하면 버전 정보가 나오는데, HyungSee 님의 SyntaxHighlighter 버전은 1.5.1 이고, 제 것은 2.0.320 입니다. 혹시, 그 차이가 아닐까 싶네요. SyntaxHighlighter 를 달고 있는 블로그 몇 개를 둘러 보니 ( http://madochi.tistory.com/2 , http://gyuha.tistory.com/193 , http://www.javamaster.org/lecture/js/sh.html (1.4.1) ) 다른 곳들도 버전에 따라 툴바가 text 로 나오기도 하고 icon 으로 나오기도 하는 것 같습니다. 직접 코드를 바꿔서 확인해 봐야 알겠지만, 저는 여기까지 추측만 하겠습니다^^ ㅎ

      http://alexgorbatchev.com/wiki/SyntaxHighlighter 를 보면 현재 최신 버전은 2.1.364 까지 나와있네요~ 그럼~~
  4. 2010/01/18 00:30
    마몸님 덕분에 2.x버전으로 갈아탔어요 글자크기는 안되지만 pre태그로 하니깐
    확실히 편하네요 감사합니다^^
    • 2010/01/18 11:32
      댓글 주소 수정/삭제
      네~~ 소스 코드에는 SyntaxHighlighter가 딱이죠~ 그럼, 멋진 내용으로 블로그 채워 나가길 바래요~~
  5. 2010/07/26 22:01
    유용한 자료 감사합니다~ 잘보고갑니다~
    즐거운 하루되세요^^
    • 2010/07/28 01:52
      댓글 주소 수정/삭제
      네, Daos님도 즐거운 하루 하루 되세요~
  6. 2010/09/24 15:59
    3.0에서도 되나요??
  7. 2012/03/10 22:21
    정말 유용했습니다. 고맙습니다 ^,^


카테고리

모두 (466)
We BLOG (349)
테라피 (54)
재능 찾기 (61)

달력

«   2012/05   »
    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 30 31