블로그 포스트에 코드 조각 삽입하기

코드 조각(code snippet)을 블로그 포스트에 예쁘게 삽입하려면 정성을 기울여야 한다. 한때 Syntax Highlighter를 써 보려고 노력했지만 블로그의 템플릿을 수정하는 것도 까다로웠고 실제 적용한 뒤에 페이지를 로드해 보면 제대로 불러오는데 시간이 많이 걸린다는 느낌이 들었다.

좀 더 간편한 방법은 없을까? Stack Overflow에서 그 해답을 찾았다.

Formatting code snippets for blogging on Blogger

첫번째는 hilite.me 웹사이트를 이용하는 것이다. 웹사이트 주소도 아주 외우기 쉽다. '하이라이트 미' 아니겠는가? 여기를 방문하여 소스코드 창에 원하는 코드 조각을 입력하고 언어의 종류와 스타일을 결정한 뒤 나오는 HTML 코드를 복사하여 블로그 편집창에 넣으면 된다. 이렇게 말이다. 편집모드는 HTML로 놓는 것이 좋다.

#!/usr/bin/perl

while (<>) {
    chomp;
    my @data = split /\t/, $_;
    print "$data[0]: $data[3]\n";
}

이러한 용도의 웹사이트는 몇 군데가 더 있다.

• http://formatmysourcecode.blogspot.co.uk/
• https://tohtml.com/colorer.php?type=auto/

또 다른 사용자는 다음의 css 스크립트를 복사하여 쓰는 것을 제안하였다. 중간의 블록에 코드를 삽입한 다음 이를 그대로 블로그 편집창에 넣으라는 것이다. syntax highlighting 기능은 없지만 소스 코드를 그대로 보이는 데에는 유용하다. 매우 단순한 방법이다.

 <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<<<<YOUR CODE HERE>>>>>>>

       </code>
 </pre>

이를 한 번 적용해 보았다.

#!/usr/bin/perl

while (<>) {
    chomp;
    my @data = split /\t/, $_;
    print "$data[0]: $data[3]\n";
}       

블로그 문서 내에서 '<'과 '>'을 제대로 표시되게 하는 것은 여전히 어렵다. 몇 번씩 '미리보기'로 확인을 해야 하니까 말이다. 오늘 찾은 방법은 잘 기억해 두었다가 활용하도록 하자.