[Tistory Blog] 티스토리 블로그 소스코드 작성

이번 포스팅은 티스토리 블로그를 작성하면서 불편했던 소스코드 작성에 대한 해결 방법을 포스팅해보도록 하겠습니다.

티스토리가 처음 나왔을 때, 다른 포털 블로그보다 좋은 유융한 기능들과 이쁘고 심플한 레이아웃으로 사용자들의 유입이 많아졌던 것으로 알고 있습니다. 하지만 이러한 티스토리를 계속 사용하면서 불편한 점들이 있었는데, 그중에 대표적인 것이 코드를 작성할 수 있게 하는 코드 작성창이 없다는 것입니다. 특히나 저의 블로그는 한 게시글당 코드가 적어도 하나는 있기 때문에 작성할 때도 불편하고, 작성 후에도 깔끔한 포스팅이라는 느낌을 받을 수 없었습니다.

이러한 불편한 문제점을 해결하기 위해 여기저기 찾아봤더니 괜찮은 사이트가 있어 공유하고자 합니다. 티스토리 블로그에 코드를 작성하기 위해서는 파일을 받아 HTML/CSS 설정을 하고 코드 작성할 때마다 HTML을 고쳐야 하는 방법도 있는데, 이 방법은 사이트에 코드를 적고 복사만 하면 끝이기에 간단하고 쉽습니다.

먼저 Color Scripter라는 사이트 https://colorscripter.com/ 에 접속해주세요.

심플한 웹 페이지 하나가 뜨는데, 가운데 창에 작성하실 코드를 적고 아래 클립보드에 복사를 누르고 게시글 작성시 붙여넣기를 하면 끝입니다.

메뉴부터 하나씩 살펴보면 언어 탭에서는 Color Scripter 에서 지원하는 다양한 언어들이 있는데, 작성할 언어를 선택하고 코드를 작성하면 해당 코드에 맞게 Syntax가 적용되어 나오게 됩니다.

언어를 C언어로 선택하고 C언어 코드를 작성한 모습입니다.

다음은 스타일패키지 탭으로 어떤 스타일의 환경을 사용할 것인지를 선택할 수 있습니다.

스타일 패키지로 서브라임 블랙을 선택하였더니 서브라임처럼 어두운 배경으로 바뀌었습니다.

언어와 스타일 패키지의 경우 확장 스토어를 이용하면 더욱 다양한 종류를 선택할 수 있습니다.

이렇게 작성한 코드를 아래 클립보드에 복사하기를 누르면 배경과 코드 모두 클립보드에 복사되어집니다.

그 상태로 글쓰기에서 붙여넣기(Ctrl+V) 를 해주시면 그대로 복사가 됩니다.

#include <stdio.h>
void main(){
    printf("Hello! It is Gabii's World:)");
}

위의 코드가 클립보드에 복사해서 바로 붙여넣기 한 코드인데 Syntax와 줄번호, 어두운 배경까지 사용자가 원하는대로 적용할 수 있었습니다.

이 사이트의 가장 큰 장점이라면 빠르고 간단하고 쉽게 사용할 수 있다는 점에서 추천드립니다.

덧붙이자면 저는 제가 쓰고 있는 스킨 CSS 설정때문에 코드를 붙여넣고 나면 이상하게 변하는 문제가 있었는데, 혹시 비슷한 문제를 겪으신다면 아래 접혀있는 글을 마저 봐주시면 도움이 될 것 같습니다.

▽▽▽▽▽▽▽▽▽▽▽▽

제가 이 사이트를 알게되고 쓰기 시작했을 때, 게시글을 작성하면 아래와 같이 어딘가 이상한 모습으로 글이 등록이 되었습니다.

이유를 알기 위해서 다른 블로그 분들의 글을 찾아봤는데 다들 엄청 잘 쓰시고 계셔서 결국 게시글의 html을 다 살펴보았습니다.

게시글을 게시한 상태에서 F12나 html 소스 코드를 볼 수 있도록 들어가서 해당 부분을 보니 원래는 margin(여백)이 존재하지 않아야 하는데, margin이 60px 존재하고, 그 여백을 채우기 위해 코드의 배경부분이 위로 채워져 있는 문제가 있었습니다.

이 부분은 코드를 불러오는 Color Scripter 사이트의 문제가 아니고, 제가 적용하고 있는 스킨의 CSS 코드 부분에서 설정되어 있는 것이기에 margin-top이 60px로 설정되어 있는 해당 부분의 코드를 margin-top:0 으로 바꿈으로 잘 해결되었습니다.

이제는 잘 수정하여 위의 사진이나 현재 게시글처럼 잘 사용하고 있습니다.

혹시 저와 같은 문제나 비슷한 문제가 있으신 분들은 댓글 남겨주시면 제가 답 달아드리겠습니다.

△△△△△△△△△△△△

이번 포스팅은 유용한 사이트를 소개했는데 조금이나마 도움이 되었다면 좋을 것 같습니다.

다음 포스팅에서 봐요 :))