StackEdit을 통한 Markdown으로 티스토리 글쓰기 (ft. 프라치노 공간)
나름의 Devlog를 시작하고부터 프라치노 공간 덕분에 예전에 비하면 깔끔해졌지만, 글 작성에 있어서 몇 가지 문제점이 있었습니다.
😂 <code> 태그를 넣기 어렵다.
알고리즘 풀이에 대한 글을 쓸 때 변수를 따로 강조하기 위해 <code> 태그를 넣곤 하는 데, 다른 <strong>이나 <underline> 태그처럼 <code> 태그를 넣는 버튼이 티스토리 글 작성 에디터 UI에는 없습니다. 그래서 <code>가 필요한 곳마다 직접 HTML로 태그를 집어넣는 방식으로 노가다스러운 작업을 해야 했습니다…
✨ 내가 작성한 코드가 더 이뻤으면 한다.
저에게 이쁜 것은 이 세상의 어떤 것보다 중요합니다. 알고리즘 풀이에서 스니펫(snippet) 코드를 가져오는 경우 저는 Color Scripter라는 사이트를 이용했습니다. 제 코드를 붙여넣으면 언어를 자동으로 판별하여 문법을 하이라이팅 해주는 좋은 사이트입니다. 하지만 이 사이트에도 단점이 있었습니다. 우선 플래쉬가 필요합니다. 저는 크롬(Chrome) 브라우저를 주로 사용하는 데 크롬은 71버전 이후로 레지스토리를 건드리지 않으면 브라우저의 플래쉬를 항상 켜놓을 수 없습니다. 필요할 때마다 플래쉬를 허용할 수 있지만 너무 귀찮고, 레지스토리를 건드리면서까지 이 사이트를 사용할 필요은 없어보입니다.또한 Color Scripter를 이용해 받은 HTML 코드도 아쉽습니다. 최근에 보았던 이 가로를 꽉 채우는 스니펫 코드와 달리 저의 코드는 코드의 가로 길이에 따라 너비가 뒤죽박죽이여서 정돈되지 않은 느낌을 줍니다.
😃 답은 Markdown!!
제가 찾아낸 답은 Markdown이었습니다. 백틱(backtick)으로 <code> 태그를 쉽게 만들 수 있고, 스니펫 코드도 세 개의 백틱으로 간편하게 만들 수 있었습니다. 스니펫 코드의 경우 제가 사용하는 스킨인 프라치노 공간의 경우 이번에 새 버전으로 업데이트하면서 highlight.js를 통한 개발 언어 하이라이트 지원이 되었기 때문에 저는 바로 적용할 수 있었습니다. 다른 스킨을 사용하신다면 티스토리의 HTML 편집 기능을 통해 스니펫 코드의 하이라이팅을 할 수 있습니다.
😎 StackEdit
다음으로 어떤 Markdown 에디터로 글을 작성해야 할 지를 결정해야 했습니다. 제가 중요하게 생각한 것은 다음과 같습니다.
- Markdown 언어로 쓰고 있는 글이 실제 어떻게 보이는지 확인할 수 있는가?
- 내가 원하는 형태의 HTML로 Export할 수 있는가?
이 두 조건에 딱 맞아 떨어지는 것이 StackEdit이였습니다.
🤔 어떻게?
그럼 StackEdit에서 쓴 Markdown 글을 어떻게 Tistory로 옮길 수 있을까요?
- Markdown 언어로 StackEdit에서 글을 작성합니다.
- 오른쪽 창에서 Export to disk를 클릭합니다.
- Export as HTML을 클릭합니다.
- Template을 Jekyll site로 설정하고 COPY를 눌러서 HTML 코드를 복사합니다.
- Tistory에서 HTML을 체크하고 해당 코드를 붙여넣습니다.
이 방법에도 장점만 있는 건 아닙니다. 이미지의 경우 글을 다 작성한 뒤 티스토리에서 이미지를 따로 추가해줘야하는 약간의 번거로움이 따릅니다.
Written with StackEdit.