코드 하이라이터 선택 가이드


프로그램 제작이나 티스토리 같은 블로그를 하다보면 공유의 목적으로 글을 쓰기도 하는데 이때 프로그래밍의 코드 입력시 가독성이 떨어지는 문제가 있어 코드 하이라이터 를 적용하기로 했습니다.

구글에 검색해보니 몇가지의 방법이 있는데 그중 4가지를 선별하여 포스팅해 봅니다.


크게 두가지의 방법이 있습니다.

- 코드 하이라이터 코드를 생성해 주는 사이트에 접속후 생성된 코드를 홈페이지나 블로그에 붙여넣기 하는 방법

- 다운로드한 자바스크립트와 CSS를 로드후 미리 정의된 태그로 입력된 코드를 감싸는 방법


특별히 문제점이 없다면 어떤것을 사용해도 원하는 결과는 나올겁니다.

어떤것을 사용할지는 여러분의 몫!!

Color Scripter(바로가기)



처음으로 알아볼 Color Scripter 라는 웹 사이트는 자체에서 한글을 지원하기 때문에 사용하기가 매우 쉽습니다.

지원하는 언어로는 html, javascript, python, php등을 지원하며 기본적으로 4가지의 스타일을 지원합니다.

사용방법은 사용할 언어와 스타일을 선택하고 코드 및 text를 입력하면 스타일이 적용된 소스를 얻을수 있습니다.

이후 원하는 곳에 가서 붙여넣기 하면 끝!



지원하는 언어나 스타일이 적다고 생각이 된다면, Color Scripter의 확장 스토어를 이용하는것을 추천합니다.

여러가지 언어와 스킨을 지원하고 있습니다.


장점 :

- 홈페이지가 한글로 되어있어 처음 사용하는 이용자 입장에서 거부감이 적다.

- 코드와 스타일만 입력하면 자동으로 스타일이 적용된 코드가 생성되어 사용하기 쉽다.

- 확장 스토어 운영으로 지원하는 언어나 스타일을 추가 할수 있다.

- 따로 자바스크립트 및 CSS 코드를 삽입하거나 불러오지 않기 때문에 로딩시 부하가 적다.


단점 :

- 생성된 코드를 보고 있자면 어지럽고(?!) 수정하기 힘들다.

아래 이미지를 참고....




Syntax highlighting(바로가기)


사용법은 앞서 위에서 소개했던 것과 유사합니다.

Source code에 코드를 입력후 highlight를 클릭하면 HTML code에 코드가 생성되는데 이것을 복사후 사용하면 됩니다.

Syntax highlighting 와 Color Scripter 의 차이점이라면 사이트 내부에서 생성된 코드를 볼수 있는가? 없는가? 그리고 지원언어 스타일의 차이입니다.



장점 :

- 코드와 스타일만 입력하면 실시간으로 스타일이 적용된 코드가 생성되어 보여지기 때문에 복사후 사용하기 쉽다.

- 자바스크립트, CSS 코드를 삽입하거나 불러오지 않기 때문에 로딩시 부하가 적다.


단점 :

- Color Scripter 마찬가지로 코드가 혼란(?!)해진다.

- 지원하는 스타일이 적다.



Prismjs(바로가기)



Prismjs 의 매력이라면 필요한 부분만 선택 및 로드해서 이용할수 있다는 점입니다.

홈페이지에 접속해보면 많은 언어, 플러그인을 한눈에 볼수 있고 이를 선택 및 다운로드 할수 있습니다.

* 위 이미지에서는 일부를 편집해서 보여드렸기 때문에 좀더 자세히 알고 싶다면 홈페이지를 참고하세요.



사용할 언어와 플러그인을 선택했다면 하단에 JS, CSS 파일이 실시간으로 갱신되는것을 볼수 있는데 이 코드를 직접 html화면에 삽입하거나 다운로드후 해당 파일을 불러오는 형식으로 코드를 삽입하면 되겠습니다.

이후에 아래와 같이 사용하면 됩니다.


[pre class="사용할 플러그인 이름"]

[code class="language-사용할 언어"] 내가 작성한 코드 및 TEXT [/code]

[/pre]



장점 : 

- 지원하는 언어, 플러그인이 많아 사용자의 이용폭이 넓다.

- 필요한 부분만 불러와 사용할수 있기 때문에 가볍다.

- 앞서 소개한것과는 다르게 코드가 깔끔하게 정리되어 있어 수정시 문제가 없다.


단점 :

- html의 이해도가 낮은 사용자라면 처음 사용시 어려울수 있다.

- JS, CSS가 다른것과 충돌할경우 제대로 동작하지 않을수 있다.



Highlight.js(바로가기)


Highlight.js 는 바로 앞서 소개한 Prismjs 와 사용법이 매우 비슷하기 때문에 자세한 사용법은 생략합니다.

다만 몇 가지 차이점이라면 아래와 같습니다.

- 플러그인을 제공하지 않는다.

- 실시간으로 코드를 볼수 없다.

- 스킨의 경우 다운로드한 파일에 모두 들어가 있으므로 이곳에서 원하는 스킨을 확인후 확인후 로드 해야 한다.



장점 : 

- 지원하는 언어, 스킨이 많아 선택의 폭이 넓다.

- Cdn 을 지원한다. 단, CSS는 기본값(Default)이 적용된다.


단점 :

- html의 이해도가 낮은 사용자라면 처음 사용시 어려울수 있다.

- JS, CSS가 다른것과 충돌할경우 제대로 동작하지 않을수 있다.

WithU

모바일 어플 및 PC 관련정보 제공

    이미지 맵

    블로그 다른 글

    댓글 0

    *

    *

    이전 글

    다음 글

    티스토리 툴바