종종 블로그에 글을 쓰다 보면 소스 코드를 올려야 할 경우가 있다. 지금까지는 <pre> 태그를 사용해 밋밋하고 재미없는 소스 코드를 보여드렸는데, 앞으로는 Javascript code prettifier를 사용해 예쁜 소스 코드를 올려드리려 한다.
유명한 'hello, world'를 예로 들어보자. 지금까지 아래처럼 코드를 보여드렸다면...
/* hello, world! */
#include <stdio.h>
int main(int argc, char** argv) {
printf("hello, world!\n");
return 0;
}
앞으로는 다음과 같이 코드를 보여드릴 계획이다.
/* hello, world! */
#include <stdio.h>
int main(int argc, char** argv) {
printf("hello, world!\n");
return 0;
}
물론 C 코드 이외 다른 코드(HTML, 자바, 루비, 파이썬 등등)도 Javascript code prettifier에서 지원하므로 칙칙했던 B급 프로그래머 블로그가 조금 더 밝아지리라 기대한다.
# Ruby knows what you
# mean, even if you
# want to do math on
# an entire Array
cities = %w[ London
Oslo
Paris
Amsterdam
Berlin ]
visited = %w[Berlin Oslo]
puts "I still need " +
"to visit the " +
"following cities:",
cities - visited
그러면 어떻게 이런 마법을 부렸는지 독자 여러분을 위해 간단히 핵심만 설명드리겠다.
- 블로거 관리도구를 열어 좌측 메뉴에서 템플릿 항목을 선택하고 [HTML 편집] 버튼을 눌러 HTML 편집 화면으로 들어간다. 편집 화면에서 </head>를 찾아 바로 위에 다음과 같은 코드를 넣는다.
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
- 아직 편집이 덜 끝났다. 자바스크립트 코드를 구동하기 위해 <body>를 찾아 다음과 같이 가장 끝 부분에 onload 메소드를 추가한다.
<body ... onload='prettyPrint()'>
- [템플릿 저장] 버튼을 눌러 변경 내용을 저장한다. 혹시 모르니 [템플릿 미리보기] 버튼을 눌러 화면이 깨지지는 않는지 확인한다.
- 이제 준비가 끝났으므로 블로거 관리도구에서 새 글을 작성해 다음과 같이 간단한 코드를 추가해본다. 알록달록 예쁘게 나와야 한다.
<pre class=prettyprint> int x = foo(); /* foo */ int y = bar(); /* bar */ </pre>
- 코드에 행 번호를 보여주고 테마를 바꾸는 등 추가 정보는 Javascript code prettifier README를 참고하기 바란다.
한 가지 주의 사항을 덧붙이겠다. 이런 부류의 스크립트는 대부분 코드를 있는(!) 그대로 출력하므로 코드 내부에 <와 >등이 들어 있을 경우 웹 브라우저가 내부 문자열을 태그로 인식해 잡아 먹어버린다. 코드량이 적을 경우에는 문제가 되는 부분을 일일이 손으로 수정해도 되지만 그렇지 않은 경우 실수할 가능성이 높다. 다행히도 인터넷에 HTML 코드를 이스케이프하는 도구가 많이 올라와 있으므로(예: Replace special characters with HTML Entities - Online tool), 번거롭지만 이를 사용해 문제가 되는 문자를 치환하기 바란다.
EOB
There was nothing but a single reason when I moved from blogspot to wordrepss. Check this out. http://en.support.wordpress.com/code/posting-source-code/
답글삭제