Color Scripter를 이용해서 블로그에 소스코드 포스팅하기

작성자:
블로그에 소스코드를 넣고 싶을때 사용할만한 괜찮은 하이라이트 서비스를 발견했다.

Color Scripter

국내 젊은 개발자가 6년째 운영중인 서비스인데 지금까지 사용해본 기능 중에 가장 괜찮은 퀄리티를 제공하고 있었다. 개발자의 노고에 경외를 표한다.


사용법도 간단하다.
  • 언어: 하이라이팅할 언어를 선택한다. 상당수는 자동으로 감지된다.
  • 스타일패키지: 하이라이팅할 코드의 스타일을 정하는데 서브라인 블랙이 맘에든다.
스타일이 적용된 코드를 블로그에 포스팅하려면 세부설정이 필요하다.
우선 기본적으로 글꼴과 줄간격, 줄번호 등을 삽입할 수 있는 설정이 존재한다.


스타일이 적용된 코드를 포스팅하려면 아무래도 HTML코드화 된 소스 코드를 블로그에서 HTML 형태로 삽입하는게 좋다. 이 기능은 세부설정의 HTML태그 자체 복사부분을 선택한다. 추가로 삽일할 코드의 특정 라인의 길이가 길 경우 가로 크기 제한을 걸어주는 것이 좋다.

저장 후 페이지 우측하단에 클립보드에 복사를 클릭하면 스타일이 적용된 코드가 HTML 형태로 클립보드에 저장 된다.

우선 포스팅을 시도해 보자
글 쓰기 메뉴에서 HTML로 선택한 후 소스코드를 복사한다.
* 만약 하이라이팅하고자 했던 원본 소스자체가 복사된 경우 세부설정에서 HTML태그 자체 복사를 선택하지 않은 것이니 재시도 하자.

다음과 같이 소스코드가 삽입되는 것을 확인할 수 있다. 그런데 생각보다 코드의 폰트가 너무 크다.


소스코드의 폰트 사이즈를 조정하기 위해서는 아쉽게도 HTML 코드를 직접 수정할 수 밖에 없다. 글 쓰기 매뉴로 돌아가서 HTML 항목 중 첫번째 줄의 style 항목에 원하는 font-size를 직접 입력한다.


첫번째 줄 코드에 아래와 같이 font-size: 12px;를 추가한다. (원하는 사이즈로 설정)
1
<div class="colorscripter-code" style="font-size: 12px; color:#f0f0f0; font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; width:900px; position:relative !important; overflow:auto">
cs

최종적으로 코드를 확인하면 다음과 같이 크기가 조정된 것을 확인할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ID 찾기 처리
exports.post_id_find = (req, res, next) => {
    lI("[post_id_find]");
    const mail = req.body.mail;
    lD("mail: ", mail);
    const rcvUserinfo = (info) => {
        lD("rcvUserinfo:", info[0]);
        sendMailToClient(mail, "[ITS Admin] YOUR ID", next, "mail_recover_id.html", { ID: info[0].ID });
 
        var response = {
            result: "success",
            msg: "ITS System send you a mail. Plese check your mail."
        };
        responsePage(req, res, false, next, "recover_id.html", { response });
    };
    const onError = (error) => {
        req.code = 500;
        req.msg = error.message;
        next();
    };
    Manager.findByOption({ mail: mail }).then(rcvUserinfo).catch(onError);
};
cs

Color Scripter를 사용할 때 아쉬운 점은 세부설정이 저장되지 않기 때문에 매번 세부설정을 조정해 줘야한다는 점이다.
사족으로 개발자분의 블로그에 가서 수정을 부탁드리려 했더니 일이 많이 바쁘셔서 수정을 쉽지 않을거 같았다.

어쨌든 당분간은 Color Scripter를 이용할 예정이다.

댓글

댓글 쓰기