이번 포스팅에서는 소스코드를 블로그 또는 웹페이지에 올릴 때 가독성이 높게 올릴 수 있도록 Colorscripter 사용법에 대해 정리해보았습니다.
여러가지 프로그래밍 언어로 만든 코드를 블로그 또는 웹페이지에 공유가 필요한 경우가 있습니다. 하지만 이러한 경우 소스코드를 그대로 블로그 등에 올리면 가독성이 떨어지고, 이해하기 어려울 수 있습니다. 이러한 문제를 해결하기 위해서는 소스코드의 가독성을 높이기 위한 여러가지 방법이 있습니다.
문법 강조(Syntax Highlighting) 적용 : 이러한 경우 가장 많이 쓰이는 것이 문법 강조 입니다. 소스코드에 문법 강조를 적용하면, 각 문법 요소에 따라 색상이 다르게 나타나므로 코드의 가독성이 높아집니다. 이를 위해서는 웹사이트나 텍스트 에디터에서 문법 강조 기능을 사용하거나 소스코드 강조 기능을 제공하는 서비스를 이용하면 됩니다.
물론 문법 강조 방법 외에도 아래와 같은 방법이 사용되기도 합니다.
들여쓰기 적용 : 들여쓰기를 적용하면, 코드 블록의 구조를 파악하기 쉬워지므로 가독성이 향상됩니다. 이를 위해서는 탭(tab)이나 공백(space)을 이용하여 각 코드 블록을 들여쓰기하면 됩니다.
주석 추가 : 소스코드에 주석을 추가하여, 코드의 의미와 용도를 설명하면 코드의 이해도가 높아집니다. 주석은 코드 내에서 중요한 부분이나, 코드의 기능이 명확하지 않은 부분에 추가하는 것이 좋습니다.
코드 블록 삽입 : 코드 블록을 삽입하여, 소스코드를 더욱 명확하게 표현할 수 있습니다. 코드 블록은 코드 영역을 강조하고, 다른 내용과 구분하여 보기 쉽게 해줍니다. 이를 위해서는 코드 블록을 적용하는 HTML 태그나 마크다운(Markdown) 문법을 이용하면 됩니다.
하지만 들려쓰기 적용이나 주석 추가 또는 코드 블록을 삽입하는 방법 등은 여전히 가시성이 떨어지는 문제점이 존재합니다. 이러한 가시성을 높이는 방법 중에 “문법 강조”를 해주는 서비스가 몇 가지 존재하는데요,
대표적으로 VSCODE에서는 Polacode(마켓 플레이스로 연결)나 Carbon 등이 존재합니다. 하지만 가장 대중적으로 쓰이는 것은 Colorscripter가 아닐까 싶습니다. 이번 포스팅에서는 우선 Colorscripter 사용법에 대해 정리하고, 티스토리 블로그에 올리는 방법을 정리해보려고 합니다.
Colorscripter 사용법 (1) 개요
Colorscripter 사용법에 대해 정리하기 전에 가볍게 해당 서비스 개요를 정리하면 아래와 같습니다. 사실 가독성 향상만 기능이 존재할 거라고 생각할 수 있는데 코드 공유 기능도 생각보다 유용합니다.
가독성 향상 : 소스코드를 올리면 자동으로 문법 강조(Syntax Highlighting)가 적용됩니다. 이를 통해, 소스코드의 가독성이 향상되어 코드를 이해하기 쉬워집니다.
코드 공유 : URL을 통해 소스코드를 다른 사람과 공유할 수 있습니다 (URL 자동 생성) . 이를 통해, 코드를 공유하고 협업하는 데 도움이 됩니다.
코드 복사 및 붙여넣기 : 소스코드를 HTML 형태로 복사하여 클립보드에 저장할 수 있습니다. 이를 통해 블로그 등에 포스팅할 때 매우 편리해집니다.
즉, 가독성이 향상되고 코드 공유와 붙여넣기가 편리해지며 다양한 언어를 지원하여 자신이 사용하는 언어에 맞게 소스코드를 작성할 수 있습니다. 이를 통해, 소스코드 작성과 관리가 더욱 효과적으로 이루어질 수 있습니다.
Colorscripter 사용법 (2) 주요 기능
Colorscripter 사용법을 정리하면 아래와 같습니다. 우선 Colorscripter 홈페이지에 접속한 다음, 가장 먼저 보게 되는 것이 좌측 상단에 있는 “언어” 부분입니다.
보통 “언어“ 부분은 “자동”으로 설정해두면 ASP, C, C#, CSS, HTML, 파이썬, 자바스크립트 등 많은 언어를 지원하며 복사, 붙여넣기 만으로도 자동으로 인식이 됩니다.
두번째 항목인 “스타일패키지” 부분은 “기본” 또는 “서브라임 블랙”을 많이 사용합니다. 라이트 계열을 배경을 보여줄지 혹은 블랙계열의 배경을 보여줄지 선택할 수 있습니다. 개인적으로는 블로그 등의 글을 올릴 때는 “소스코드”라는 강조 효과를 위해 “서브라임 블랙”을 사용하게 되는 것 같습니다.
소스코드를 복사, 붙여넣기를 하면 아래와 같이 자동으로 언어(아래 예시의 경우 Python)으로 설정이 됩니다. 스타일패키지와 배경 등을 설정한 다음, 우측 하단에 “공유하기” 또는 “HTML 복사”, “클립보드에 복사”를 사용해서 블로그나 웹페이지에 붙여넣기를 해주면 됩니다.
티스토리에 소스코드 붙여넣기 예시
가령 티스토리에 소스코드를 붙여넣고자 하면 아래와 같은 방법으로 진행하면 됩니다.
우선 소스코드를 작성한 다음, 상단의 설정을 하고 우측 하단의 “HTML 복사”를 눌러서 나타난 팝업창에서 아래와 같이 나타난 소스코드를 복사해주면 됩니다.
티스토리에 작성할 때는 “기본모드”가 아닌 “HTML”을 눌러서 HTML 코드로 붙여넣기가 가능하게 설정한 다음,
아래와 같이 앞서 Colorscripter에서 복사한 내용을 붙여넣기를 하고 소스코드 수정할 부분을 살펴봅니다. (물론 그대로 붙여넣기를 해도 상관이 없습니다.)
참고로 소스코드 상자가 가운데로 정렬을 하고 싶다면, Ctrl + F를 눌러 margin을 검색한 다음,
<div class=”colorscripter-code-table” style=”margin: 0″…> 코드에서 style=”margin: 0″에서 style=”margin: auto”로 바꿉니다. margin 값을 auto로 바꾸면 소스코드 박스가 게시글 가운데에 정렬 됩니다.
참고로 다시 “미리보기”를 하면 아래와 같이 소스코드가 가독성이 좋게 삽입된 것을 확인할 수 있습니다.
이번 포스팅에서는 먼저 Colorscripter 사용법에 대해 정리하고, 티스토리 블로그에 올리는 방법을 정리해보았습니다.
앞선 포스팅에서 정리한 프로그래밍/코딩 관련 글은 아래와 같습니다.
[파이썬 x VSCODE 기초] ① 아나콘다 설치 및 가상환경 설정 3분 끝내기
ChatGPT API 사용 방법 3분내 끝내기 (1) Text-Davinci-003 특징 및 OpenAI 계정 생성하기