[Web]블로그에서 소스코등 문법 강조(Syntax Highlight) 하는 방법!

블로그에서 소스코드를 가지고 소통을 하고자할 때,
단색의 소스코드를 가지고 얘기하기란 쉽지가 않다.


만약,
- 코드의 예약어, 명령어들이 다양한 color 등으로 의미에 따라 강조되고(vim, emacs 와 같은 보통의 에디터 출력처럼)
- 가독성을 위해 자동 indentation 과 line number 가 추가되어 있다면

멋지지 않을까?(Coo~~~l) <= 이를 Syntax Highlighting (문법 강조) 라고 한다. 


세상은 넓고 내가 하는 고민은 언제가 한번 누군가가 당연히 했었을 꺼다.
널리 쓰이는 방법을 아래와 같이 소개한다.

open source project 중 SyntaxHighlighter(http://alexgorbatchev.com/SyntaxHighlighter/) 가 가장 널리 사용되고 있다. 이를 이용하면 다음과 같이 소스코드가 highlighting 된다.

이를 사용하는 방법을 간단히 요약 설명하면
1. blog file system에 script 와 style 파일들을 추가하고
2. blog header 에서 이파일들을 loading 한 뒤
3. <pre> 나 <script> 태그를 이용하여 코드부분을 작성하면 된다.

즉, 우리의 갈망을 지원하는 Javascript 코드를 (제공하오니 이들을) 웹페이지에 추가해서 사용해라! 고 생각하면 된다. 




추가로, 
이와 같은 작업이 번거로워 웹에서 이러한 변환을 미리 해주어 html 로 translate 해주는 사이트도 존재한다. 

http://www.stevetrefethen.com/highlighter/default.aspx

하지만 언제 이싸이트가 이름모르게 사라질 수도 있으니(?!)  이 방법을 숙지하는게 좋을 듯 싶다. 

[추가@08/20/2014]

3.0으로 업그레이드 했다. Autoloader가 추가되고 사용법이 간단해 진것 좋지만, 하나의 language에서 다양한 syntax를 해석해서 구분하지 못한다는 점은 아쉽다.

기본 사용법은 

<pre class="brush:언어명; highlight: [line1, line2...]">

/* 나의 코드 */

</pre>

으로 매우 간단!

<CPP 코드 example>

int addNumAndCheck(int, int, unsigned int *, int *);

int main()
{
	unsigned int population[26] = {18897109, 12828837, 9461105, 6371773, 5965343,
		  5946800, 5582170, 5564635, 5268860, 4552402, 4335391, 4296250, 4224851,
		  4192887, 3439809, 3279833, 3095313, 2812896, 2783243, 2710489, 2543482,
		  2356285, 2226009, 2149127, 2142508, 2134411};

	int sumPop = 0, rem;

	// to find a complementary set
	for (int i = 0; i < 26;i++)
		sumPop += population[i];
	rem = sumPop - 100000000;

    int stack[26] = {0,};	//a virtual stack for populations
	int testResult = -100;
	int confirmResult = 0 ;

	testResult = addNumAndCheck(rem, 0, population, stack);

	// check and print the result
	if(testResult == 0){
		for (int i = 0; i < 26; i++){
			if(stack[i] == 1){
				printf("[%d] %d",i, population[i]);
				confirmResult += population[i];
			}
		}
		printf("\n");

 ...