[꾸미기] 블로그에 소스코드 깔끔하게 포스팅하기
안녕하세요.
이번엔 블로그 글에 소스코드를 깔끔하게 포스팅하는 방법을 알아보겠습니다.
제 블로그의 카테고리를 보시면 아시겠지만
제 블로그 글의 대부분은 프로그램 개발에 관한 정보가 될 것 입니다.
그러다보니, 소스코드를 넣어 포스팅하는 일이 빈번할 것 입니다.
다른 개발자분들의 블로그를 보니 소스코드가 이쁘고 깔끔하게 넣어져 있더라구요.
저도 따라해 보고자 검색을 좀 해봤습니다.
가장 많이 쓰이는 것이
SyntaxHighlighter라는 것이더라구요.
저도 시도를 좀 해보았으나..
일단 스크립트 자체가 좀 무거운 느낌이 있습니다.
아니면 CDN서버가 좀 느린가..? 이런 느낌?
기능은 머 대체로 비슷비슷하니 문제가 될 것은 없는 것 같았습니다.
단, <html>태그가 잘 안 먹더라구요.
<html 머 이런식으로 변환해 줘야 합니다.
다른 html태그는 그나마 괜찮은 듯 합니다.
다음으로 아무래도 구글이 이런 유틸들을 많이 배포하니
구글에서도 한 번 찾아보았습니다.
Google Code Prettify라는 것이 있더군요.
방식은 SyntaxHighlighter와 흡사합니다.
단, 좀 더 가벼운 느낌은 있습니다.
하지만 좀 쓰다보니
제 마음에 들게끔 만들기 위해서는 제가 스스로 코딩을 해야하는 부분이 좀 생기더라구요.
그리고 찾은 것은 Color Scripter 입니다.
이 것은 위의 2가지와 방식이 좀 다르더라구요.
위의 두 가지는 스크립트 방식으로
위에서 제공하는 javascript와 css를 제가 가져다 쓰는 방식이라면
Color Scripter는 Color Scripter 사이트에 방문하여 그 곳에서 코딩을 하고
완성 된 코딩을 블로그로 복사+붙여넣기 방식입니다.
위 방식이 무언가 가볍고 쓰기 간편할 듯 하여 사용해 보기로 했습니다.
전에 포스팅 했던 JQuery 사용하기의 설정코드로 테스트 해 보겠습니다.
먼저 Color Scripter 사이트를 방문합니다.
언어와 스타일 및 세부설정을 자신의 스타일에 맞게 마추어 놓고
텍스트 박스에 코딩을 한 후 클립보드에 복사합니다.
그리고 작성하던 블로그로 돌아와서 글에 붙여넣기만 하면 끝입니다.
아래는 샘플입니다.
1 2 3 4 5 6 7 8 9 | <script src="http://code.jquery.com/jquery-2.1.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { alert('test alert'); }); </script> | cs |
사용법도 쉬우면서 UI도 깔끔합니다.
Color Script 사이트를 즐겨찾기에 추가해 놓고 쓰면 될 듯 합니다. ㅎㅎ
감사합니다.