각종 코드들을 다루다 보면 어딘가에 게시해야 되는 경우가 생기기 마련이다. 대부분은 코드를 게시하려는 곳이 개발자 커뮤니티거나 github 같은 사이트인 경우가 많아 코드를 읽기 쉽고 예쁘게 하기는 그렇게 어렵지 않겠지만, 블로그나 개인 웹사이트 같은 곳에 코드를 올릴 때에는 지원해주는 기능이 없어 불편했던 경험이 있을 것이다.
이런 개발자들의 고생을 알았던 건지, 요즘에는 어떤 '사이트'에 들어가서 코드를 입력하기만 하면 바로바로 컬러풀하고 보기 좋게 만들어 주는 곳이 생겼는데..
바로 colorscripter라는 사이트다.
코드를 예쁘게, colorscripter
먼저 위 링크를 타고 들어가서 colorscripter 사이트에 들어가도록 하자.
간단해 보이는 화면이 반겨준다. 우리의 작업은 여기에서 모두 처리될 것이다. 그럼, 하나하나 알아보자.
위에 빨간색으로 친 부분에는 여러분들이 코드의 디자인을 마음껏 지정할 수 있게 도와주는 도구들이 있다.
첫번째에 있는 언어는 프로그래밍을 할때 사용하는 프로그래밍 언어를 뜻한다. 기본값은 '자동' 으로 어떤 코드를 넣느냐에 따라 언어가 자동으로 선택되지만, 가끔 되지 않는 경우가 있다.(필자는 JS 넣으면 인식이 안됨) 그럴 땐 직접 선택해 주면 된다.
두번째에 있는 스타일패키지는 에디터의 스타일이라고 보면 되겠다. Visual studio나 Atom 에디터 같은 것들에 여러 스타일을 적용할 수 있고, 그에 따라 하이라이트 색상(특정 키워드에 대한 색상 예 : function, char, 함수명 등)이 달라지는 것처럼 말이다.
그리고 '배경'은 말그대로 배경의 디자인을 정할 수 있고, 그 옆에 있는 세부설정은 각종 세세한 것들을 컨트롤 할수 있으며 확장스토어에서는 다른 스타일을 적용해 보거나 직접 만들어 볼 수도 있다(!)
위에 있는 설명을 참고해서 만들어 보면 이런식으로 코드가 예뻐진 걸 볼 수 있다. 하지만 여기서 끝이 아니다. 이제 이 코드를 복사해주어야 된다.
Ctrl + C가 아니다. 오른쪽 아래에 있는 클립보드에 복사 버튼을 누르면 저 코드의 멋지게 디자인된 결과가 복사된다. 그 이후엔, 블로그나 사이트에 글 쓰는 칸에 그대로 붙여넣기 하면 된다.
1 2 3 4 5 6 7 8 9 | function a(name){ this.name=name; this.alertName=function(){ alert(this.name); } } var newA=new a("JJJAM"); newA.alertName(); | cs |
이런식으로 말이다.
정리하며
앞으로는 멋진 코드, 이런식으로 더 멋지게 만들어서 사이트나 블로그에서 뽐내보자. 가독성이 좋을 뿐만 아니라 글을 읽을 때의 느낌이 달라지게 된다.(고급스러움?)
지금까지 코드를 예쁘게 만들어 주는 도구, colorscripter에 대해 소개했다. 그럼 이만.