#!/bin/bash
# Fibonacci numbers
# Writes an infinite series to stdout, one entry per line

function fib() {
local a=1
local b=1
while true ; do
echo $a
local tmp=$a
a=$(( $a + $b ))
b=$tmp
done
}

# output the 10th element of the series and halt
fib | head -10 | tail -1

Google Code Prettify 라이브러리를 이용해 만든 Syntax Highlighter 입니다.

사용할 코드 하이라이터를 찾던 도중 마땅한게 없어 만들게 되었습니다. 다음과 같은 장점이 있습니다.

1. 용량이 매우 작다.
코드 변환 엔진의 경우 용량이 9KB밖에 하지 않습니다. 트래픽이 많은 블로그를 운영하시는분께 적절한 효과가 있을것입니다.

2. 서버의 부하가 적다.
코드 변환 작업을 서버 사이드에서 하지 않고 클라이언트 사이드에서 합니다. 코드 변환은 자바스크립트를 통해 하게 됩니다. 서버사이드 역시 간단한 태그 치환작업외에는 없습니다.

3. 변환 속도가 매우 빠르다.
Google Code Prettify Example 에서 변환 속도를 테스트 해 볼수 있습니다. 매우 빠른 속도를 자랑하고 있습니다.

4. 언어별 설정이 필요 없다.
기존의 언어를 명시해 주어야 했던 방식과 달리 단순히 [code][/code]태그만 사용하면 알아서 사용한 언어를 파악하여 파싱해 줍니다. 기존의 [code php][/code]와 같이 사용했던 방식보다 훨씬 간단합니다.

5. 다양한 언어를 사용할 수 있다.
기본적으로 Bash, C, Cpp, Java, Javascript, Perl, Python, XML, HTML, HtmlXmp, XHTML, PHP, XSL 를 사용할 수 있으며, 이외에도 모든 코드 및 일반 텍스트까지 할수 있는데까지 임의로 하이라이팅을 하여줍니다.

6. 다양한 커스터마이징 옵션을 제공한다.
index.php 파일을 수정하면 누구든지 자신에게 맞게끔 CSS 및 치환 설정을 바꾸거나 추가하여 사용할 수 있습니다.

7. 웹표준을 지향한다.
최대한 W3C의 표준을 준수하여 모든 브라우저에서 최대한 똑같이 보이도록 노력하였습니다.

이 글의 관련글

트랙백을 보내세요

트랙백 주소 :: http://theeye.pe.kr/trackback/166
  1. 텍스트 큐브 플러그인 - SyntaxHighlighter (rezmod)

    Tracked from rezlog 2007/10/19 00:54

    텍스트 큐브로 바꾼 이후로 플러그인 페이지 하단의 '플러그인 업로드 게시판' 링크가 바뀌어 발길이 뜸해졌던, 테터툴즈 플러그인 게시판. 오랫만에 들어가봤다. 텍스트 큐브로 바뀐 이후에도 꾸준히 활성화 되어 있어서, 텍스트 큐브에서 사용할 수 있는 유용한 플러그인들이 꽤나 많이 나와 있었다. 그 중에서 내 눈길을 끈것 중 하나가 바로 SyntaxHighlighyer. 코드 하이라이팅 플러그인으로 langtohtml을 썼다가, 텍스트 큐브로 바꾸고 난...

  2. 텍스트큐브에서 문법 강조하기

    Tracked from mooo.org 2007/10/22 11:20

    역시 세상에는 없는 게 없다. 블로그에서도 문법 강조를 쓸 수 있다는 것을 왜 생각치 못했을까.아쉽기는 했지만, 찾아볼 생각은 하지도 않았었는데, 오늘 좋은 플러그인 하나를 찾게 됐다.Syntax Highlighter텍스트큐브에서 쓸 수 있는 플러그인이다. Google의 Code Prettify 라이브러리를 사용해서 만들었다고 한다.만들어주신 아이님께 감사의 인사를 :)아울러 이 플러그인이 PHP5에서 개발되었기 때문에 PHP4 이하에서는 문제가...

  3. Good Plugin :: Syntax Highlighter

    Tracked from Plan-B Start. 2007/11/11 04:58

    #include <stdio.h> int main (void) { printf ("Hello, World!"); return; }The eye 님께서 만드신 SyntaxHighlighter 1.2.1 - Google Code PrettifyGoogle Code Prettify 라이브러리를 사용해서 만드셨다는데....내가 찾던 완소 플러그인이다. (-_-)간단하게 [code][/code] 태그로 감싸기만 하면 저렇게 멋지게 나온다.물론 구글..

  4. AS3 Syntax Highlight를 한번에~!!

    Tracked from Adobe AIR Devpia. 2008/03/25 09:53

    Adobe AIR Application Installer Page This application requires the following be installed: Adobe® AIR™ Runtime AS3 SyntaxHighlighter Studio Please click on each link in the order above to complete the installation process. 설치하시고... 기본 설정 그대로..

댓글을 달아 주세요

  1. 머드초보 2007/09/29 11:40

    이거 니가 만들었구나!!!!!!!!!!!! 굿샷!!!!!!
    근데 들여쓰기는 어떻게 했어?-_-;

  2. mkyoon 2007/09/30 00:57

    CSS도 잘 나오네요! 잘 쓸께요!!

  3. takeone 2007/11/21 16:25

    안녕하세요~ 아이 님의 플러그인 잘쓰고 있습니다.

    근데 이번에 제가 포스트를 하는데 문제가 발생해서 이렇게

    댓글을 답니다.

    일단 문제의 글은 http://www.takeone.pe.kr/132 입니다.

    일단 이글, 파이어폭스에서는 문제없이 잘 보입니다. 제가

    평소에는 파이어폭스를 이용하기 때문에 문제가 없었는데요

    IE로 보니 애드센스 광고와 이미지들이 빈 화면으로 보이는겁니다.

    그래서 일일이 테스트해본 결과

    [code] [/code] 안에 들어가 있는 부분이 문제였습니다.

    그중에서도 제 포스트에 [code] 안에 들어가있는 소스 부분에

    보시면 <Image ... 로 시작되는 부분이 있습니다. 그안의

    data: ... 라고 되어있는부분 ( data:... 요 부분하고

    이미지만 넣어서 포스트한뒤 테스트 했더니 문제가 생겼습니다.)

    이부분이 문제가 있는 부분입니다.

    문제 부분도 알았고 해서 제가 소스 파일을 열어 해결해보려

    했지만 우매한 저로써는 무리가 ㅡㅜ

    또 이왕! 댓글 단김에 몇가지 건의도 해보렵니다.

    1. 줄이 긴 소스의 경우 다음줄로 넘어갔으면 합니다.

    2. 라인넘버가 출력됐으면 좋겠습니다. 물론 끍었을때 라인넘버는

    않긁어지면 좋겠구요 ( 옵션으로 할수 있으면 좋을듯...)


    저도 나름의 해결방법을 찾겠습니다. 혹 금방 해결하시게 되면

    수정해서 올려주세요

    좋은 하루 되시길.. ^_____^

    • 아이 2007/11/22 09:26

      안녕하세요. 대충 확인해 봤는데 제 소스코드하이라이터때문에 블로그가 깨지는것인가요? 별로 상관이 없어 보입니다만^^;;
      제가 해보니깐 class명 imageblock dual을 가지고 있는 div의 가로 사이즈가 정해져있지 않습니다. 이유는 모르겠지만 길이가 엄청나게 늘어나는군요. 아마도 밑에있는 table때문인것 같습니다.
      imageblock div에 정당한 블로그 사이즈 만큼(width:600px)정해 놓으시면 이미지가 나타날 것입니다.

      1.자동줄바꿈의 경우는 될텐데요? 제가 그것되게 할려고 시간을 꽤 많이 할애했습니다만-_-a 한번 확인해 보겠습니다.
      2. 줄바꿈이 있는 코드하이라이터는 많이 있습니다. 겐도님이 만드신것도 그것이고요. 저는 개인적으로 줄이 싫고 심플한것을 원해서 만들게 되었습니다;; 나중에 추가해 보겠습니다.

  4. takeone 2007/11/21 16:46

    아 지금 파이어폭스 2 를 다시 깔아서 썼더니 파이어폭스 2

    에서도 안나오네요 파이어폭스 3 베타 쓰고 있었거든요

  5. takeone 2007/11/22 10:04

    아 그렇군요! 답변감사합니다 ^^;

  6. Antop 2008/07/09 09:51

    이런 멋진걸 올려주셔서 감사합니다.
    제가 써보니 한가지 문제가 있는데,
    다 잘 되는데 보여지는 상태에서 글을 복사한 후 다른곳(메모장이나 에디트플러스)에 붙여넣기하면 다~ 한줄로 나오네요...

    • 아이 2008/07/11 10:23

      예, 좀 그런 문제가 있더군요.
      copy랑 print기능정도를 추가해볼까 고민되네요.

  7. Antop 2008/07/16 01:22

    그래서 저도..
    구글가서 최신버젼 하이라이트 받아서 적용시키니까
    복사 붙여넣기는 잘 되던데..
    이제는 앞에가 다 한줄씩 한칸씩 띄어져서 나오는데..
    실력이이 안되니 뭐 수정도 못하겠고 ^^

    다음 버젼이 나오길 기다리겠습니다~ ㅠㅠ

비밀글 (Serect)
댓글 달기 (Submit)