티스토리 API 글쓰기를 마크다운 모나코 에디터로 작성하기.

업데이트.

티스토리 블로그를 시작하고,
하는둥 마는둥 하면서 했던 작업 중 하나가 티스토리 API를 활용한 글 작성이였다.

마크다운 관련 티스토리 자체 지원 에디터가 맘에 들지 않았기 때문이다

삽질

이것저것 마크다운 에디터를 활용했었다.
tui editor도 써보고, 중국산 마크다운 에디터나, react나 vue에서 나왔다는 마크다운 에디터도 건드려보고..

그러다 결국 vscode의 마크다운이 젤 편하고 쓰기 편하다는것을 깨달았다.

멀티커서 지원, 자동 완성 등, 문서에서 마크다운 이상의 서식을 원하지 않는다면
사실 작성하고 지우고 편집하는데 이만한 에디터가 없다

모나코 에디터

그래서 마크다운 에디터를 만들기 위해 vscode의 텍스트 기반이 되는 모나코 에디터를 나만의 커스텀으로 개발하였다. vscode에서 활용중인 코드 하이라이트 부분을 가져와 최대한 vscode와 유사하게 하였고,

완벽한 구현은 아니지만 제법 하이라이트가 잘 되기에 쓸만하다고 볼 수 있다

console.log('asdf');

위의 예제코드를 후술할 링크에서 작성해보시면 아시겠지만 마크다운 에디터 내에서도 vscode처럼 하이라이트가 된다!

http://allthatnba.com/tistory/new.html

현재 글쓰기는 잘되나, 보는쪽에서 미리보기와 동일한 레이아웃을 제공하려면 특정한 스크립트와 css를 로드해야하는데 해당 부분은 처리 하지 않았다. api 관련 소스는 위의 부분, 그리고 나머지 정리가 되지 않은 부분을 정리하여 깃허브에 공개해놓을 예정이며, 혹여나 티스토리 api를 활용해야하는 분이면 해당 소스와 에디터를 참고하셔도 좋고

해당 링크에서 직접 블로그를 포스팅하여도 크게 문제가 없을거라 생각된다.