> ## Content Index
> Fetch the complete content index at: https://www.popit.kr/llms.txt
> Use this file to discover other available public pages before exploring further.

# WordPress Plugin 살펴보기 : Crayon Syntax Highlighter
- URL: https://www.popit.kr/wordpress-plugin-crayon-syntax-highlighter/
- Published: 2016-08-10T15:05:07.000Z
- Updated: 2016-08-10T15:09:41.000Z
- Author: 홍 태희
- Tags: #소프트웨어, WordPress, Plugin, Crayon, Syntax Highlighter

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

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

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

![Crayon Systax Highlighter](https://www.popit.kr/content/images/wp/2016/07/Crayon-Systax-Highlighter.png)

.

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

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

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

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

![Crayon_Conf1](https://www.popit.kr/content/images/wp/2016/07/Crayon_Conf1-600x511.png)

![Crayon_Conf2](https://www.popit.kr/content/images/wp/2016/07/Crayon_Conf2-600x501.png)

![Crayon_Conf3](https://www.popit.kr/content/images/wp/2016/07/Crayon_Conf3-600x445.png)

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

## 테마

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

![Crayon_Theme](https://www.popit.kr/content/images/wp/2016/07/Crayon_Theme-115x600.png)

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

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

![Obsidian](https://www.popit.kr/content/images/wp/2016/07/Obsidian-600x169.png)

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

![SublimeText](https://www.popit.kr/content/images/wp/2016/07/SublimeText-600x170.png)

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

![IntelliJIdea](https://www.popit.kr/content/images/wp/2016/07/IntelliJIdea-600x170.png)

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

![Eclipse](https://www.popit.kr/content/images/wp/2016/07/Eclipse-600x170.png)

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

![CiscoRouter](https://www.popit.kr/content/images/wp/2016/07/CiscoRouter-600x170.png)

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

![809finest](https://www.popit.kr/content/images/wp/2016/07/809finest-600x172.png)

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

![글쓰기](https://www.popit.kr/content/images/wp/2016/07/%E1%84%80%E1%85%B3%E1%86%AF%E1%84%8A%E1%85%B3%E1%84%80%E1%85%B5-600x393.png)

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

## Language

**C++** 

```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**

```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**

```sh
#!/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**

```mysql
SELECT column_name, count(*)
FROM table_name
WHERE column_name='test'
GROUP BY column_name;
```

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

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