Syntax Highlighter 2.0

2009.04.20 20:35 IT·인터넷/블로그

웹이나 블로그에 소스 코드를 올릴 때에는 <pre> 태그를 이용하고 css 코드를 이용하여 배경을 조금 두두러지게 하고, 키워드는 프로그램을 따로 작성해서 <b> 태그를 추가하도록 했습니다. 그러나 매우 단순해 보이죠. 그리고 <pre> 태그는 자칫 웹 페이지의 구성을 망가지게 할 수 있습니다. <textarea> 태그를 사용하면 “<”와 “>” 문자를 그대로 사용할 수 있어 편합니다.

#include <stdio.h>

int main( void)
{
    printf( "Hello, jwmx!!\n");
}

그러다가 Syntax Highlighter를 알게 되었는데 Tistory에 어떻게 설치하는지 몰라 지금껏 사용하지 못했는데, “Lean On You” 블로그에 매우 자세하고 쉽게 설명되어 있어서 드디어 오늘 설치했습니다. 그것도 <pre> 가 아닌 <textarea> 태그를 사용할 수 있는 방법이 소개되어 있습니다.

그래서 위의 소스 코드가 아래와 같이 출력됩니다. 행 번호부터 색상도 다양하게 출력되면서 이전 방법 보다도 더 예쁘게 출력됩니다.

문서를 작성하는 방법도 더욱 편해졌습니다. 이전의 <pre> 태그를 사용했을 때에는 아래와 같이 <b> 태그까지 넣어서 입력해야 하기 때문에 작성도 작성이지만 수정하기가 어려웠습니다.

그러나 Syntax Highlighter를 이용하면 이렇게 소스를 그대로 입력하기 때문에 작성부터 수정까지 매우 편합니다. 보시면 “<” 문자와 “>” 문자를 그대로 사용하고 있는 것을 보실 수 있습니다.

C 언어 외에도 다양한 언어를 지원하니 소스 코드로 문서를 작성하신다면 이용해 보시기를 권하고 싶습니다.

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 저도 1.5.1 버전 사용하다가 얼마전에 2.0으로 업그레이드 했습니다.
    참 보기 좋죠.

    근데 "클립보드로 복사" 항목이 빠져있네요. 일부러 안하시건가요?
  2. 저도 예전 부터 비공개 플러그인으로 만들어 사용하고 있습니다. 2.0은 조금 무거워진 것 같더군요.