블로그나 웹 문서에 코딩 결과물을 그대로 올리게 되면 (특히 html) 오류가 생길 가능성이 높아진다. 또한 IDE 에서는 색의 변화를 이용해 코드의 가독성을 높였으나, 블로그나 웹 문서에 코드를 그래도 올리면 가독성도 떨어질 뿐더러 예상치 못한 오류가 발생하기 일쑤이다. 하지만 웹 문서에 소스코드는 올려야 하고 가독성도 좋게 하고 싶으면, 이번 포스팅에서 소개할 기능을 활용해 보자.
코딩 결과 멋있게 출력하기
여기 설명하는 사이트들은 기본적으로 블로그에 게시한다는 전제 하에 설명하겠다. 다른 곳에도 올릴 수는 있으나, 블로그에 올리는 (웹 문서) 것과는 차이가 있을 수 있으므로 참고하길 바란다.
내 소스 코드를 남들이 보게 하고 싶을 때, 하이라이팅 및 구분선, 가능하다면 배경까지 바꿀 수 있다면 좋을 것이다. 거기에 간단한 테마까지 입힐 수 있으면 가독성은 최상일 것이다. 아래의 코드처럼 가독성이 좋게 블로그 (웹 사이트) 에 게시할 수 있게 도와주는 사이트 2곳을 소개할 것이다.
1. ColorScripter
Color Scripter
Simple & Flexible Syntax HighLighter
colorscripter.com
ColorScripter는 배경 색상 및 하이라이트 색상을 알아서 구분해준다. C언어, 파이썬, 자바 등 각 언어에 따라서 하이라이팅이 달라지지만, 다른 하이라이팅을 원한다면 언어를 수동으로 설정할 수 있다. 지원되는 언어는 22가지가 있으며, 사람들이 주로 쓰는 언어 위주이다.
ColorScriper 홈페이지는 이렇게 생겼다. 본문에 코드를 입력 후 테마 및 세부 설정을 한다. 마지막으로 HTML 복사 버튼을 누른다. 그 이후에 블로그에 글을 쓸 때 (티스토리 기준) 기본모드 -> HTML 로 변경한 다음, 복사한 코드를 몽땅 붙여넣기 한다. 그렇게 하면 내가 쓴 코드가 간단히 자동 하이라이팅 및 테마가 적용되어 출력한다.
이 방법의 장점은 코드가 텍스트로 인식되어 코드 내용을 쉽게 복사 붙여넣기 할수 있다는 점이다.
2. Carbon
Carbon
Carbon is the easiest way to create and share beautiful images of your source code.
carbon.now.sh
Carbon은 코드를 깔끔하게 정리하여 출력한다는 점은 ColorScripter 와 같지만 출력 형식이 다르다. ColorScriper 는 HTML 형식으로 출력하지만, Carbon 은 이미지 파일로 출력한다. 지원하는 언어의 종류도 훨씬 많고, 디자인도 ColorScriper 보다 훨씬 이쁘다! 사진만 보면 내가 맥북에서 코딩한 것 같은 느낌을 많이 준다.
폰트 설정 및 언어 설정, 출력 파일 형식까지 지원이 가능하다. HTML로 출력이 가능하지만, 나의 경우에는 결과물이 깨져서 나왔다. 그래서 크기 및 비율이 일정한 이미지 파일로 저장하는 것을 출력한다. 하지만 이미지 파일이기 때문에 텍스트를 쉽게 복사 붙여넣기 할 수 없다.
총평
각자 장단점이 있는 것 같다. ColorScripter 는 코드를 복붙할 수 있고 Carbon은 디자인면에서 상당히 뛰어나다. 각자 취향에 맞는 것을 골라서 활용하면 될 것 같다. 이 둘 말고도 다른 서비스도 있으니 찾아보길 바란다.
'티스토리 블로그 운영기' 카테고리의 다른 글
| 티스토리 블로그 테마 적용하는 법 (2) | 2020.05.05 |
|---|---|
| 애드워즈 키워드 단가 확인하는 법 (3) | 2020.05.05 |
| 구글 애드센스 신청기 – 수익금을 지급받다! (2) | 2019.07.27 |
| 사이트맵을 구글 서치콘솔 및 네이버 웹마스터 도구에 제출하는 법 (0) | 2019.07.10 |
| 티스토리 블로그 모바일 반응형 표 만들기 (1) | 2019.07.02 |