[티스토리][JS]코드블럭 VSCode처럼 꾸미기(1)_시작하기

서론

티스토리에 코드들을 포스팅하면서 불만이 하나 있었다. VSC를 계속 사용해 온 나에겐 티스토리에서 제공해 주는 코드블록의 기본 디자인이 너무 익숙하지 않다는 것이었다.

그래서 이번에는 코드블록 디자인을 VSC랑 비슷하게 바꿔보도록 하는 시간을 갖겠다.

기존의 코드블록 디자인 살펴보기

먼저, 티스토리의 코드블럭에선 다음과 같은 디자인들을 제공해 준다. 

그러나 흑백의 비주얼스튜디오코드 디자인이 없어서 직접 만들기로 결심하였다.

 

기본 제공 티스토리 코드블럭 하이라이팅

위 사진을 보면 줄간격이 생각보다 너무 크고 폰트도 약간 익숙하지 않다는 단점이 있다.

앞으로 만들 디자인 살펴보기

참고할 디자인은 CodeSnap의 디자인이다.

CodeSnap은 VSCode의 확장프로그램인데 이렇게 코드를 드래그한뒤 우클릭하면 뜨는 CodeSnap을 클릭하고 카메라 촬영과 같은 버튼을 누르면

 

VSCode CodeSnap 사용법

 

 

이렇게 아래와 같이 코드를 예쁘게 정리해서 이미지로 변환해준다.

 

CodeSnap 사진

 

간단하면서도 군더더기 없는 깔끔한 디자인이다. 맥의 디자인과 유사하다고도 볼 수 있을 것 같다.

이렇게 예쁜 이미지를 보니 티스토리 블로그의 코드 블록에도 적용해보고 싶어 졌다.

티스토리 코드블록 꾸미기

구글링 결과, 이런 VSC 스타일을 바로 티스토리 코드블록에 적용해 주는 방법은 없는 걸로 보였다.

(혹여나 찾게 된다면 그 방법에 대해 포스팅할 생각이다.)

 

보통 티스토리 코드블록을 꾸미는 방법에 대해 검색하면 아래와 같이 티스토리의 기본플러그인인 코드문법강조 플러그인을 통해 설정하는 방법이 있다.

이는 제일 쉬운 방법이나 직접 적용해 보면 무언가 많이 부족하다는 걸 바로 느낄 수 있다.

티스토리 기본 플러그인, 코드 문법 강조

혹은 highlight.js를 사용하여 바꾸는 방법도 있다. 이 방법은 약간 어려울 수 있으나 한글로 된 관련 자료가 많아 관련 글들을 찾아보며 차례대로 따라 하면 쉽게 만들 수 있다.

또한 여러 가지 언어와 테마를 제공해 주므로 사용자의 입맛에 맛게 설정할 수 있는 방법으로 보인다.

 

하지만 이런 방법들은 내가 원하는 대로 직접 수정하거나 만들기는 어렵다고 생각되어 직접 만들기로 결심하였다.

가장 큰 이유는 highlight.js에는 VS는 있으나 VSCode 테마가 없다는 점 때문이다.

 

본격적으로 시작하기 전에 먼저 어떻게 할지 대충 구상해 보자면 자바스크립트를 적극적으로 활용하면 수월하게 작업이 가능할 듯싶다.

생각보다 관련자료가 많이 없어서 힘들겠지만 더 나은 디자인을 위해 한번 해보려고 한다.

 

앞으로의 글에는 내가 몰랐거나 초심자에겐 어려울 수 있는 부분에 대한 문법 설명과 내가 어떤 과정을 통해 이런 생각을 하였는지, 어떤 시행착오를 거쳐 어떻게 해결하였는지 세세히 적어서 올릴 예정이다.