코드 하이라이트 color scripter 사용법

 Code Highlight란?

코드 하이라이트는 웹페이지에 표시된 소스 코드들에 syntax highlight을 해주는 라이브러리 입니다.

- 적용 전

#include <iostream>

int main()

{

     std::cout << "hello, world!";

     return 0;

}

-적용 후

#include <iostream>

int main() 
{
    std::cout << "Hello, World!";
    return 0;
} 

큰 차이가 보이시나요 :3c

이처럼 코드 하이라이트는 코드에 가독성을 향상 시켜주고 보다 깔끔한 포스팅을 가능하게 합니다.

개발 블로그를 운영하시는 분, 혹은 자신의 코드를 웹상에 공유하고자 하는 분들에게

아주 유용한 플러그인이 되겠죠?

어떻게 적용하는가

코드 하이라이터를 적용하는 방법은 크게 두 가지입니다.

1. (비설치) 코드 하이라이트 사이트에서 생성된 html코드를 글에 붙여넣는 방법

2. (설치) 코드 하이라이트에서 제공하는 js, css파일을 홈페이지에 업로드하고 지정 태그를 사용해서 작성하는 방법

저는 위 두가지 방법 중 별다른 설치 과정이 필요없는 웹 기반 코드 하이라이트를 소개드리려 합니다.

1. Color Scripter (바로 가기)

- color scripter 메인 화면

- 언어를 자동으로 설정해놓으면 작성된 코드 언어에 맞춰 변환해줍니다.

- 테마 또한 변경 가능합니다. 저는 어두운게 좋아서 서브라임 블랙을 선택했습니다.

- 아주 간단하게 클립보드에 복사 버튼을 누르시고 원하는 글에 붙여넣기하면 바로 적용됩니다.

적용 후

총평

장점

•  변환이 빠르고 가벼움
  
•  편리한 세부 설정 제공 (스크롤 기능, 폭 조절 등)
•  확장 스토어에서 다양한 언어와 커스텀 테마 사용 가능
  
•  이쁨
  

단점

•  특정 브라우저나 모바일 환경에서 제대로 안보일 수 있음
  
•  HTML 코드가 길고 복잡함
  

이상, color scripter 사용법을 알아봤습니다!