[Tip] 블로그에서 소스코드 예쁘게 정리하기

나는 소스코드를 블로그에 올릴 때 Syntax Highlighter를 사용한다. 그냥 밋밋하게 나오는것 보단 깔끔하고 보기 쉽게 나오기 때문이다. 하지만 네이버블로그에서는 스크립트 태그를 지원하지 않아서 사용할 수 없단다. 그래서 좋은놈을 찾아냈다.

 

color scripter라는 건데 Syntax Highlighter보다 사용하기 쉽고 간편하다. 나처럼 그냥 쓰기에는 차이점이 없다.

Syntax Highlighter를 사용하기 위해선 파일을 다운받아 약간 복잡한? 과정을 거치고 글을 작성할때 html로 바꿔서 코드 처음과 끝에 <pre class="brush:cpp"></pre> 같은걸 붙여서 사용하게 되는데 오늘 소개해줄 녀석은 그런게 필요없다.

그냥 소스 작성해서 붙여넣기 하면 끝이다.

 

먼저 아래 사이트로 접속하면 다음과 같은 화면이 나온다.

http://prev.kr/app/ColorScripter/

 

 

웹에서 바로 사용할 수도 있고 다운받아서 사용할 수도 있다. 웹보다는 다운받아 쓰는데 더 편한거 같다.

 

언어선택이 뜨는데 자신이 작성하는 코드 언어에 맞게 선택해준다.

 

난 c언어를 사용하니까 c++을 선택해주었다. 선택하면 그냥 예제처럼 c++ 기본코드가 나오는데 그냥 다 지우고 사용하면 된다. 소스작성이 완료되면 아래 사진에 표시되있는 곳을 클릭하고 포스팅할때 붙여넣기로 넣으면 된다.

 

설정도 바꿀 수 있다.

 

스타일에 사용자정의를 눌러서 기호에 맞게 바꿀 수 있다.

 

스크롤을 아래로 내려서 색깔을 바꿔보자. 난 Syntax Highlighter에 익숙해서 "줄번호-줄"에 파란색이 마음에 안들어서 연두색으로 바꿔주었다.

 

스크롤을 위로 올려서 저장을 눌러준다.

 

짜잔~ 바뀐걸 확인하였다. 블로그에 올리기 위해서 오른쪽 아래 복사를 눌러주자.

네이버블로그든 티스토리든 글을 작성할 때 붙여넣기하면 아래 처럼 들어간다. 근데 아래 첫번째 소스는 폭이 너무 좁다.

아래 그림처럼 스페이스키로 늘려준다.(좁아서 보기 싫었다ㅋ 개인취향)

※ 여기서 글꼴 바꿔줄 수 있다.

아래는 실제 적용한 코드이다.

Colored By Color Scripter™

1 2 3 4 5 6 7 8 9 10

#include <iostream>   int main (void) {     //주석이당~     std::cout<<"Hello World" <<std::endl;                      return 0;   }

 

 

신택스 하이라이터처럼 특정 줄을 강조하는 기능은 없지만 난 사용하지 않으니까 상관업다 ㅋ