본문으로 바로가기
homeimage
  1. Home
  2. IT·인터넷/블로그
  3. Syntax Highlighter 2.0

Syntax Highlighter 2.0

· 댓글개 · 바다야크

웹이나 블로그에 소스 코드를 올릴 때에는 <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 언어 외에도 다양한 언어를 지원하니 소스 코드로 문서를 작성하신다면 이용해 보시기를 권하고 싶습니다.

SNS 공유하기
💬 댓글 개
최근글
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.