[테터툴즈 플러그인] SyntaxHighlighter 1.2.1 – Google Code Prettify

[code]#!/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[/code]
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의 표준을 준수하여 모든 브라우저에서 최대한 똑같이 보이도록 노력하였습니다.

1078602747.zip

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

    • 들여쓰기는 특수문자 처리했어.

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

  • Pingback: rezlog()

  • Pingback: mooo.org()

  • Pingback: Plan-B Start.()

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

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

    댓글을 답니다.

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

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

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

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

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

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

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

    보시면

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

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

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

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

    • 위에 댓글 달았어요^^

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

  • Pingback: Adobe AIR Devpia.()

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

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

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

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

    • 아이

      다음버젼 곧 내놓을께요~