블로그 글을 마크다운으로 작성하자

전 워드프레스 글을 작성할 때에 블록 에디터를 사용하지 않습니다. 일부러 구식 에디터인 클래식 에디터를 이용하고 있습니다. 이는 제가 구글 블로그스팟을 운영했을 때의 흔적입니다. 블로그스팟에는 변변한 에디터가 갖추어져 있지 않아서 마크다운을 Joplin으로 작성하고 그것을 HTML으로 변환해 블로그스팟 HTML 에디터에 붙여넣고 수정한 뒤 발행했습니다.

이 글도 현재 Joplin으로 쓰고 있습니다. Joplin은 PC, 안드로이드, iOS에서 모두 지원하는 글쓰기 프로그램입니다. 기기 간에 글 동기화도 가능해서 아주 편리합니다. 아래 화면이 Joplin으로 이 글을 작성하고 있는 모습입니다.

이 글에서는 제가 새롭게 직접 만든 마크다운 변환기를 소개합니다.

마크다운 HTML 변환기

지금까지는 Markdown Minify라는 사이트를 이용하여 Joplin으로 작성한 마크다운을 HTML으로 바꿨습니다. 그렇지만 이 변환기에는 좀 문제가 있습니다.

먼저 링크에 target="_blank"를 붙이지 못합니다. 전 블로그 글에 있는 링크 중 외부 링크(binuball.com 밖으로 나가는 링크)는 항상 새 창에서 열리게 하고 싶습니다. 하지만 마크다운 변환기를 사용하면 링크에 target="_blank"가 붙어 있지 않습니다.

블로그 글에 사용하는 링크 중에는 내부 링크(binuball.com로 시작하는 링크)도 있기 때문에 한 번에 <a를 <a target="_blank"로 바꿀 수도 없습니다. 따라서 이전에는 글을 수정할 때마다 글 내용에 외부 링크가 있는지 점검하고 하나하나 target="_blank"를 추가해야 했습니다.

물결 표시(~)가 <del> 태그로 변환되는 것도 거슬리는 부분 중 하나입니다. 1~2개 같이 써야 할 부분이 <del> 태그로 변환되면 글자 위에 취소선이 생기기 때문입니다. 다행히 이 문제는 위에서 설명한 링크 문제보다 해결하기 어렵지 않습니다. 글을 발행하기 전 <del>과 </del>을 바꾸기 기능을 활용하여 ~로 바꾸면 끝입니다.

marked.js 개조하기

Markdown Minify의 코드를 뜯어 보니 이 변환기는 marked.js를 기반으로 실행되고 있었습니다.

marked.js를 개조해야 하니 공식 문서를 읽어야 합니다. 문서를 읽고 있자니 무슨 이야긴지 하나도 모르겠습니다. 그래서 구글 제미니한테 물어 봤습니다. 2.5 Flash (preview) 버전을 사용했습니다.

제미니한테 요청한 코드는 두 가지입니다. 하나는 ~를 <del>로 변환하지 않는 방법이고 다른 하나는 링크에 target="_blank"를 붙일 수 있는 방법입니다.

제미니가 준 코드를 실행해 보니 두 개 다 동작이 안 됐습니다. 일단 제미니가 준 외부 링크 코드부터 고쳐 보았습니다.

marked.js 문서를 참고하여 tokenizer: {를 tokenizer(src, tokens)로, renderer: {를 renderer(src, token)로 바꾸고 marked.use(externalLinkExtension);을 marked.use( extensions: {externalLink} );로 바꾸니 코드가 잘 실행되었습니다.

물결 표시 변환을 막기 위해 ~와 ~ 안에 있는 문자열을 그대로 꺼냈더니 ~와 ~ 안에 마크다운으로 변환해야 할 문자열이 포함되어 있는 경우 변환이 안 되는 문제점이 생겼습니다.

이 문제는 그냥 replace 함수를 활용하여 <del>과 </del>을 ~로 바꾸는 방법으로 해결하였습니다.

마크다운 변환기 사이트 제작하기

이제 마크다운 문서를 HTML로 잘 변환할 수 있게 되었으니 남은 것은 적당한 변환용 웹페이지를 만드는 것 뿐입니다.

원래는 구글 번역 페이지처럼 텍스트 입력창을 두 개 넣어서 한 쪽에 마크다운 문서를 붙여넣으면 다른 쪽에 변환된 HTML 문서가 나오게 했습니다. 하지만 이 방법은 마크다운 문서를 HTML 문서로 바꿀 때 붙여넣기를 두 번, 복사를 두 번이나 해야 하므로 꽤나 번거롭습니다.

어떻게 하면 더 편하게 변환할까 생각을 해 보니 웹페이지에서 클립보드의 내용을 가져와서 HTML로 변환한 후 변환한 HTML 코드를 클립보드에 넣으면 좋겠다는 생각을 했습니다.

클립보드 API를 활용하여 사이트를 만들었습니다. 버튼을 누르기만 하면 클립보드에 저장되어 있는 마크다운 문서를 HTML로 변환해 줍니다.

이제 붙여넣기 한 번, 복사 한 번, 버튼 누르기 한 번으로 모든 일이 끝납니다. 블로그 글 쓰기가 아주 편리해졌습니다. 제가 만든 변환기 주소는 https://wordpress-markdown.netlify.app/입니다.

참고로 클립보드를 가져올 때에는 웹 브라우저가 권한을 요구합니다. 마크다운을 변환할 때마다 권한 요구 창을 보기 싫다면 웹 브라우저 설정을 바꾸면 됩니다.

웨일 기준으로는 설정 → 개인정보 보호 → 사이트 설정 → 추가 권한 → 클립보드 순으로 들어간 후 "클립보드 보기가 허용됨" 사이트에 해당 사이트를 추가하면 됩니다.

크롬 기준으로는 설정 → 개인 정보 보호 및 보안으로 들어간 후 웨일과 똑같이 하면 됩니다.

TODO

블로그 글에 가끔씩 소스 코드가 필요할 때가 있습니다. 이때는 밋밋하게 코드를 넣는 것보다 구문 강조(syntax highlighting)를 하면 코드를 더 가독성 있게 표시할 수 있습니다.

marked.js 관련 페이지를 둘러보다가 markjs-shiki를 보았습니다. 마크다운 문서의 소스 코드에 구문 강조를 해 주는 코드인 것 같습니다. 하지만 어떻게 사용하는지 모르겠어서 나중에 사용법을 알게 된다면 해당 기능을 추가하고 싶습니다.