블로그에 코드 삽입하기

최근 블로그에 개발 내용을 올리면서 코드를 올리는게 불편해졌다.

color 적용이 안되는것은 고사하고, 글꼴도 맘에 안들고, 들여쓰기도 제대로 되지 않고...

(아마도 괜찮은 다수의 블로그를 보고, 내 기준이 올라간것으로 생각된다..;;)

그래서 블로그별로 특성이 다른가 했는데..

결국은 어떤 블로그도 제대로 코드를 삽입하는데 유용한 블로그는 찾지 못했다.

다만, 외부의 도움이 있다는 것을 발견했을 뿐.

그 중 내가 시도하였던 방법 세가지를 기록한다.

1. Syntax Highlighter

최신 버전 3.0.83

관련 사이트: http://alexgorbatchev.com/SyntaxHighlighter/

장점 - 한번 내 블로그에 css와 js를 업로드 하면, 외부의 종속성과 영향 없이 내 블로그안에서 하는 작업만으로 적용이 가능하다.

단점 - 적용전이 어렵고, 적용후는 불편하다.

특징으로는 블로그에 반드시 HTML을 지원해야 하며, 사전 작업이 필요하다는 것이다.

자세한 적용 방법에 대해서는 별도로 나와있는 블로그들이 있기 때문에 검색을 추천한다.

사용 예는 다음과 같다.

표시되는것은 아래와 같다.(내 블로그에 적용한게 문제가 있는지 제대로 나오지 않아 캡쳐를 첨부하였다.)

2. Color Scripter

최신버전: 3.0

관련사이트: https://colorscripter.com/

장점 - 웹을 이용하여 빠른 코드 작성이 가능하고, HTML이 아닌 편집기 상에서 빠른 붙여넣기가 가능하다. 플러그인 적용도 가능하다.

단점 - 오른쪽 하단에 작은 시그니쳐가 붙으며, 코드의 내용을 밖에서 보존할 수 없다.

특징으로는 별도의 html 적용을 하지 않아도 된다.(티스토리 기준)

그저 상단의 사이트에 접속하여, 코드를 작성하고 복사 및 붙여넣으면 끝.

게다가, PC용 클라이언트가 별도로 존재하여(Adobe AIR로 되어있음) 웹에 접속하지 않아도 된다.

하지만, 이상하게, 웹과 클라이언트는 복사된 결과물이 달라서 난 개인적으로 웹을 추천한다. 웹이 깔끔.

위와 같이 입력하면

public static void main(String[] args) {
    // 프린트 한다.
    System.out.println("Hello, World");
}

아래와 같이 출력된다.

물론 스타일도 변경이 가능하다.

public static void main(String[] args) {
    // 프린트 한다.
    System.out.println("Hello, World");
}

이런식으로.

시간이 급하거나, 신속하게 예쁜 코드 삽입을 원한다면 colorscripter를 추천!

3. GitHub Gist

마지막으로 github에서 제공하는 gist이다.

관련사이트: https://gist.github.com

장점 - 웹을 이용하여 비교적 빠른 코드 작성이 가능하고, 다양한 방법으로 붙여넣을 수 있다. 내 코드를 추후 모아서 관리가 가능하다. 깔끔하다.

단점 - github에 로그인 해야하며, 코드 양이 매우 적을 경우 부담스러운 느낌이다. HTML 모드에서 붙여넣어야하며, 블로그 작성 중 확인이 불가능하다.

Github에 code 스니펫을 올려놓고, 그것을 가져다가 활용하는 것이다.

최근, 많은 개발 블로그에서 볼 수 있으며, 특히 Medium과 같은 외국 블로그에서 심심찮게 볼 수 있다.

위와 같이 Share를 함에 있어서, Embed, URL Share, HTTPS Clone 등의 방법으로 할 수 있다.(Medium의 경우 Clone via HTTPS를 이용한다.)

티스토리 기준으로는 그냥 Embed하면 깔끔하게 코드삽입 가능.

게다가, 나중에는 이 코드들을 내 개인 Github에서 모아볼 수도 있으니, 일석이조의 느낌도 든다.

붙여넣으면 적용한 예로는 다음과 같다.

특징으로는 블로그에서 publish하기 전에는 보이지 않는다. embed시 script 형식인데, javascript로 보여주는것이라 그런것 같다.

[그래서 나의 선택....]

위의 총 3가지 중에 가장 깔끔한 느낌이 들고, 트렌드를 최대한 반영했다는 느낌은 GitHubGist이다.

이곳에 앞으로는 가급적 Gist를 활용하고자 한다. :)