본문 바로가기

Ryu's Tip

티스토리에서 code highlighter 없이 글을 써보자 vs code

Table of Contents


기존 하이라이터의 문제들

안녕하세요 티스토리에 글을 좀 편하게 써보고자 해서 글을 써봅니다. 

먼저 예전에는 이런 코드하이라이터를 사용했습니다.

[driver]
name = cosbench1
url = http://192.168.0.142:18088/driver
log_level = INFO

[driver]
name = cosbench2
url = http://192.168.0.142:18088/driver
log_level = INFO

[driver]
name = cosbench3
url = http://192.168.0.143:18088/driver
log_level = INFO

#username=admin;password=ADMIN_PASS;tenant_name=admin;auth_url=http://192.168.0.11:5000/v2.0;service=swift;region=RegionOne


< 플러그인 삭제를 대비해 이미지로 붙여놓습니다. >

그런데 이 하이라이터가 오히려 글을 쓰기 싫어지게 만들더군요 가로스크롤은 참 좋지만서도..

몇몇 문제를 나열해 보면

 - 하이라이터 적용이 너무 귀찮음. pre 블럭과 code 블럭을 적용할 부분에 직접 넣어줘야함

 - HTML view와 일반 view로 글을 썼을 때 결과가 다름.

 - 특정 경우 코드 복사시 개행문자가 제대로 복사되지 않음

이런저런 방법을 사용하다보면 해결은 되겠지만 글을 매일 쓰는것도 아니고 그런 편법을 매번 기억해서 써야하는게 너무 귀찮더군요.

VS Code

그래서 그나마 좀 편하게 써보려고 Visual Studio Code를 사용했습니다.

왜 썼는지 한번 먼저 보여드리죠 아래 영상을 보시면 어떻게 아래 하이라이트를 적용했는지 보실 수 있습니다.

[driver]
name = cosbench1
url = http://192.168.0.142:18088/driver
log_level = INFO

[driver]
name = cosbench2
url = http://192.168.0.142:18088/driver
log_level = INFO

[driver]
name = cosbench3
url = http://192.168.0.143:18088/driver
log_level = INFO

#username=admin;password=ADMIN_PASS;tenant_name=admin;auth_url=http://192.168.0.11:5000/v2.0;service=swift;region=RegionOne


vs code에서는 확장자에 따라 색깔을 칠해주게 됩니다. 그래서 위에 내용에 맞는 temp.conf 파일을 임시 생성하고 내용을 붙여넣고 그냥 그대로 다시 티스토리에 붙여넣으면 vs code에서 보이는 형태가 그대로 유지됩니다.

VS Code의 문제점

그런데 여기서 해결이 안되는 부분이 있습니다.  유일한 문제가 줄바꿈 문제인데,

#username=admin;password=ADMIN_PASS;tenant_name=admin;auth_url=http://192.168.0.11:5000/v2.0; service=swift;region=RegionOne

이렇게 줄을 넘어가게 되면 칸을 넘어가서 내용이 출력되게 됩니다.

문제점 해결

white-space

HTML로 첫 줄을 확인해보면 white-space 부분이 이러한 결과를 만들어주는데 white-space: pre; 부분을 지워주시면 해결됩니다.

<div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre; ">

white-space가 선언되지 않으면 default 값으로 normal로 처리되면서 구분할 부분(단어 단위)이 있으면 이제 적절하게 칸 안에서 끊어주게 되고 다시 붙여넣어서 white-space 부분을 지워보면 이렇게 적절하게 끊기는걸 보실 수 있습니다.

#username=admin;password=ADMIN_PASS;tenant_name=admin;auth_url=http://192.168.0.11:5000/v2.0; service=swift;region=RegionOne

word-break

하지만 여기서 또 문제가 있는데 white-space 를 default로 변경하더라도 구분할 부분(단어 단위)가 없으면 또 칸을 벗어나게 됩니다.

test#abcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

이 문제는 word-break 값이 default로 normal로 처리되기 때문입니다. 

단어 단위로 끊는 것을 유지해주면서 긴 단어를 잘라주려면 word-break 값을 break-word로 설정하면 단어가 길더라도 칸이 넘어가면 짤라주게 됩니다.

<div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; word-break:break-word;">

결과는 아래와 같습니다.

test#abcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaabcdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

실사용

실사용은 간단합니다. VS CODE를 이용해서 중간중간에 코드 하이라이터 형태로 글을 다 쓰고 난 뒤 

1. HTML view로 전환

2. 메모장 복붙

3. 모두 바꾸기 white-space: pre >>> word-break: break-word

4. 다시 HTML view로 복붙

간단하지 않지만 제 입장에서는 훨씬 더 간단해져서 좋네요