WordPress Plugin 살펴보기 : Crayon Syntax Highlighter

기술 블로그를 쓸 때 가장 중요한 부분 중에 하나가 Code Highliter 가 아닐까 싶습니다.

아직 WordPress 에 있는 많은 플러그인들을 다 보지는 못했지만, 시간이 나는대로 유용한 플러그인 들을 좀 살펴보려 하는데,

먼저 현재 사용중인 Crayon Syntax Highliter 를 살펴보겠습니다.

.

글을 작성하는 시점에 50,000+ 활성 설치에 평가도 별5개로 매우 우수합니다. 실제로 Popit 워드프레스에서도 Enlighter 라는 Syntax Highliter 를 가장 처음 사용했었는데, 최근 Crayon 으로 변경을 했습니다.

한가지 유의하실 점은 WordPress 에서 기존에 사용하시던 Systax Highliter를 새로운 것으로 변경했을 때 기존에 작성했던 글들에 포함된 내용도 일괄적으로 새롭게 적용된 Highliter 의 기능에 적용이 됩니다.

따라서 이전 글들의 코드 부분이 깨지거나(?) 하는 현상을 방지하기 위해서 사이트 운용 시점에 미리 잘 고르는 부분이 중요해 보입니다.

먼저 WordPress 의 관리자가 설정할 수 있는 설정기능에는 어떤 부분들이 있는지 살펴보겠습니다.

굉장히 많은 설정 값들이 있는데, 그중에서 가장 중요한 요소인 테마를 살펴보겠습니다.

테마

테마는 Highliter 의 가장 중요한 요소입니다. 어떤 테마를 지원하는 지 클릭을 해보면,

굉장히 많은 테마를 지원하는데, 그 중에 눈에 띄는 몇가지를 선택해 보겠습니다.

먼저 현재 쓰고있는 Obsidian 입니다. 저는 개인적으로 가장 마음에 드는 테마 입니다.

다음은 Sublime Text 입니다. 이것도 실제 SublimeText 와 매우 비슷한 느낌을 주도록 구현되어 있어 나쁘지 않은 것처럼 보입니다.

다음은 IntelliJ Idea 테마인데, 약간 실망(?) 했습니다. Darcula 느낌이었으면 좋았을텐데 class 색에 대한 구분도 없고 보완이 좀 필요해 보입니다.

다음은 Eclipse 입니다. 샘플코드가 짧아서 그런지 몰라도 Eclipse 에서 보던 테마의 느낌과는 좀 다른 느낌을 받습니다.

다음은 Cisco Router 테마 인데, 너무 초록색 위주라 좀 재미가 없어 보입니다.

마지막으로 809finest 인데, 빨간색과 하얀색의 조합으로 개인적으로는 별로 맘에 들지 않습니다.

수많은 테마 중에서 마음에 드시는 테마를 고르시고 여러가지 설정들을 완료하시면, 글쓰기 에디터 창에 <> 모양 단축 아이콘이 추가되신 부분을 확인하실 수 있습니다.

역시나 가장 중요한 부분은 Language 인데, 이 또한 굉장히 많은 언어를 지원하고 있다보니 몇가지만 선택해서 미리 느낌을 보도록 하겠습니다.

Language

C++ 

#include<iostream.h>

#include<conio.h>
void main()                     //Start of main
{
  clrscr();
  int i=1, u=1, sum=0;
  while(i<=500)
  {                             // start of first loop.
  }                             //End of First loop
  getch();
}                               //End of main

Java

import java.net.InetAddress;

import java.net.UnknownHostException;
public class GetIP {
   public static void main(String[] args) {
      InetAddress address = null;
      try {
         address = InetAddress.getByName
         ("www.javatutorial.com");
      }
	  catch (UnknownHostException e) {
         System.exit(2);
      }
      System.out.println(address.getHostName() + "="
      + address.getHostAddress());
      System.exit(0);
   }
}

Shell

#!/bin/bash

# example of using arguments to a script
echo "My first name is $1"
echo "My surname is $2"
echo "Total number of arguments is $#"

SQL

SELECT column_name, count(*)

FROM table_name
WHERE column_name='test'
GROUP BY column_name;

몇가지 대표적인 언어들의 코드를 살펴봤지만, 관리자가 설정한 테마의 느낌이 언어를 바꾼다고 크게 변하지는 않는 것 같습니다.

결론적으로 여러가지 기능적인 측면이나 시각적인 측면을 고려했을 때, 개인적으로 굉장히 마음에 드는 Highligter 입니다. WordPress 기술블로그를 운영하실 때 괜찮을 Syntax Highliter 를 찾고 계신다면 적극 추천 드립니다.