시리즈

블로거에 마크다운으로 포스팅을

20190515

블로거에 마크다운으로 포스팅을

이 포스트에서는 현재 제가 쓰고 있는 방법을 소개합니다.

서론

마크다운을 사용하면 쉽게 구조화된 문서를 작성할 수 있습니다. 포스트 내용에 코 드가 들어가는 경우라면 더 좋습니다. 블로거에 포스팅을 하면서 느끼는 거지만 마크다운을 지원하지 않는 건 큰 단점입니다. 특히 최근 유행하는 github 식의 깃 저장소 블로그와 비교되면서 더욱 그 점이 부각되는 건지도 모르겠습니다. 블로거는 기본적으로 html과 서식 텍스트만 지원하기 때문에 마크다운을 블로거에서 사용하려면 html로 변환하는 것이 일반적입니다. 그러니 블로거에 마크다운 포스팅을 한다는 것은 마크다운 작성, 마크다운을 html로 변환, html로 블로거에 포스팅. 이런 3가지 단계로 나눌 수 있습니다.

그럼 우선 사용할 툴부터 살펴보겠습니다.

툴 선택

마크다운 작성 툴

우선 마크다운 작성 툴 입니다. 예전에는 sublimetext2 에서 마크다운을 작성했지만 플러그인 관리 문제 때문에 Visual Studio Code로 옮겼습니다. 마크다운 플러그인은 Markdown All in One을 쓰거나 TOC, shortcut, lint, preview 중에서 필요한 것만 사용하면 됩니다. 사실 마크다운 작성은 뭘로 하던지 마크다운 문법만 대충 맞으면 되는 문제이기 때문에 쓰고 있는 텍스트 에디터가 편하다면 그걸 사용해도 상관없습니다. (Extension이 올바른 표현이지만 그냥 플러그인이라고 합시다.)

마크다운 변환 툴

두 가지 선택이 있습니다.

옵션 1 - 앱을 이용 (MAC ONLY)

MAC OS를 사용한다면 한 번 고려해볼만 합니다. 다른 앱이 있겠지만 여기서는 제가 많이 써본 2가지만 간단히 언급하고 넘어갑니다. Pro 버전이 아니라 무료 버전 기준입니다.

Blogo - 블로깅 전용 앱. 제일 간단하고 강력한 방법. 처음 쓰는 사람에게는 불친절한 느낌의 UI지만 Evernote가 익숙하다면 적응기간이 필요 없습니다. 설정 - Editing 탭에 있는 Markdown 을 활성화 시키면 마크다운 문법을 인식합니다. 별도의 변환과정 필요 없이 마크다운 문서 전체를 복사해서 바로 포스팅 버튼만 누르면 되니 매우 간편합니다. 한글 지원이 미흡하다는 단점이 있습니다.

bear - 마크다운 전용 앱. 마크다운을 전용으로 다루는 앱 답게 엄청난 기능들로 무장하고 있습니다. 여기서 설명할 수 없을 정도로 방대합니다. 매우 화려하게 마크다운을 장식할 수 있습니다. 우리에게 중요한 html로의 변환 기능은 원래 Pro 버전에서만 지원하는 것처럼 설명하고 있지만 왼쪽 사이드 바에서 다음으로 복사 - html 을 하면 쉽게 변환됩니다.

옵션 2 - pandoc

.md 파일을 .html 파일로 바꾸는 것은 매우 많은 사람들이 오랜 시간 고민해 온 문제라서 다양한 파서들이 나와있습니다. 이런 파서 중에서 자신이 원하는 파서를 골라야겠죠. 다양한 파서들을 비교하는 쉬운 방법은 Babelmark2 에서 확인하는 겁니다. 한 눈에 다양한 파서들의 결과물을 비교해 볼 수 있습니다.

저는 pandoc 2.7.2 를 선택했습니다. pandoc은 마크다운으로 ppt도 만들고 전자책도 만드는 스위스 칼이니 여기서 설명하기는 힘듭니다. 아래 공식 사이트에서 사용법을 확인해주세요. https://pandoc.org/

터미널에서 사용
pandoc [input-file] -f markdown -t html -o [output-file]

markdown 형식의 [input-file]을 html 형식의 [output-file] 로 바꾸려면 위 명령어를 쓰면 됩니다.

CLI 프로그램답게 터미널에 명령을 입력하자마자 순식간에 html로 변환이 끝나버립니다.

Visual Studio Code의 vscode-pandoc 플러그인을 사용

Code를 사용한다면 pandoc 플러그인을 사용해도 좋습니다. 사용법도 간단합니다.

포스팅하는 과정

작성

Visual Studio Code 에서 마크다운을 작성합니다.

변환

pandoc을 이용한 변환 (터미널 또는 플러그인)

포스팅

생성된 html을 복사해서 블로거에 포스팅합니다. 퍼머링크 설정을 해줘야지 TOC 링크들이 제대로 작동합니다.

.

piano (press key Q)

Categories

flutter ( 82 ) dart ( 34 ) android ( 32 ) kotlin ( 11 ) plugin ( 8 ) provider ( 8 ) vim ( 7 ) bloc ( 6 ) iOS ( 6 ) state management ( 6 ) 플러터 ( 6 ) PS ( 5 ) algorithm ( 5 ) architecture ( 5 ) async ( 5 ) getx ( 5 ) java ( 5 ) API ( 4 ) BOJ ( 4 ) class ( 4 ) daily ( 4 ) git ( 4 ) golang ( 4 ) memo ( 4 ) riverpod ( 4 ) state ( 4 ) stream ( 4 ) test ( 4 ) web ( 4 ) widget ( 4 ) windows ( 4 ) HTTP ( 3 ) androidX ( 3 ) app state ( 3 ) context ( 3 ) crash ( 3 ) db ( 3 ) editor ( 3 ) error ( 3 ) extension ( 3 ) github ( 3 ) hive ( 3 ) ide ( 3 ) package ( 3 ) pubspec ( 3 ) python ( 3 ) syntax ( 3 ) vscode ( 3 ) app icon ( 2 ) await ( 2 ) chocolatey ( 2 ) consumer ( 2 ) cp949 ( 2 ) deployment ( 2 ) dev ( 2 ) flavor ( 2 ) gesture ( 2 ) globalkey ( 2 ) go ( 2 ) google ( 2 ) hack ( 2 ) js ( 2 ) json ( 2 ) key ( 2 ) keystore ( 2 ) list ( 2 ) listview ( 2 ) lock ( 2 ) mac ( 2 ) map ( 2 ) navigation ( 2 ) nosql ( 2 ) project ( 2 ) pub ( 2 ) recyclerview ( 2 ) rxdart ( 2 ) sdk ( 2 ) selector ( 2 ) setting ( 2 ) size ( 2 ) soc ( 2 ) synchronized ( 2 ) tdd ( 2 ) tip ( 2 ) version ( 2 ) viewmodel ( 2 ) vundle ( 2 ) webview ( 2 ) xcode ( 2 ) yaml ( 2 ) ( 2 ) 플러터 단점 ( 2 ) 16.0 ( 1 ) 2.0 ( 1 ) 2023 ( 1 ) AATP2 ( 1 ) ChangeNotifierProvider ( 1 ) Example ( 1 ) Guava ( 1 ) ImageReader ( 1 ) Mo's algorithm ( 1 ) OAuth2 ( 1 ) OpenGL ( 1 ) Oreo ( 1 ) ProgressBar ( 1 ) REST API ( 1 ) Trie ( 1 ) activity ( 1 ) adaptive ( 1 ) android P ( 1 ) android context ( 1 ) android11 ( 1 ) apktool2 ( 1 ) app exit ( 1 ) append ( 1 ) appicon ( 1 ) arkit ( 1 ) array ( 1 ) asciidoc ( 1 ) async * ( 1 ) async* ( 1 ) audio ( 1 ) authorization ( 1 ) await for ( 1 ) behaviorsubject ( 1 ) beta ( 1 ) binary ( 1 ) binarysearch ( 1 ) blender ( 1 ) book ( 1 ) bottomsheet ( 1 ) break ( 1 ) broadcast ( 1 ) browser ( 1 ) bubbles ( 1 ) bug ( 1 ) build ( 1 ) buildcontext ( 1 ) buildnumber ( 1 ) bundle ( 1 ) button ( 1 ) bytecode ( 1 ) cache ( 1 ) camera2 ( 1 ) cameramanager ( 1 ) cd ( 1 ) chrome ( 1 ) ci ( 1 ) circle ( 1 ) clean ( 1 ) clean architecture ( 1 ) cli ( 1 ) clip ( 1 ) clipboard ( 1 ) cloud ide ( 1 ) cmdlet ( 1 ) code ( 1 ) coding test ( 1 ) command ( 1 ) comparator ( 1 ) complexity ( 1 ) concurrency ( 1 ) conditional ( 1 ) const ( 1 ) constraint ( 1 ) constraintlayout ( 1 ) controlc ( 1 ) controlv ( 1 ) converter ( 1 ) copy ( 1 ) copy project ( 1 ) coupling ( 1 ) coverage ( 1 ) cp ( 1 ) css ( 1 ) cupertino ( 1 ) cursor ( 1 ) cv ( 1 ) data class ( 1 ) data structure ( 1 ) dataBinding ( 1 ) database ( 1 ) debounce ( 1 ) decompile ( 1 ) delegate ( 1 ) deno ( 1 ) design pattern ( 1 ) development ( 1 ) device ( 1 ) di ( 1 ) dialog ( 1 ) dio ( 1 ) drawable ( 1 ) drug ( 1 ) emmet ( 1 ) encoding ( 1 ) english ( 1 ) entries ( 1 ) environment ( 1 ) equality ( 1 ) equatable ( 1 ) euc-kr ( 1 ) euckr ( 1 ) exit ( 1 ) expand ( 1 ) expanded ( 1 ) export ( 1 ) extension method ( 1 ) facade ( 1 ) fake ( 1 ) field ( 1 ) figma ( 1 ) final ( 1 ) fixed ( 1 ) flutter pub ( 1 ) flutter web ( 1 ) flutter_inappwebview ( 1 ) flutter_test ( 1 ) flutterflow ( 1 ) fold ( 1 ) fonts ( 1 ) form ( 1 ) frame ( 1 ) future ( 1 ) gestureDetector ( 1 ) gestureRecognizer ( 1 ) gesturearena ( 1 ) get-command ( 1 ) get_cli ( 1 ) getbuilder ( 1 ) getx단점 ( 1 ) gitignore ( 1 ) glut ( 1 ) google fonts ( 1 ) gopath ( 1 ) goto ( 1 ) gradient ( 1 ) graphics ( 1 ) gvim ( 1 ) hackaton ( 1 ) hash ( 1 ) hashmap ( 1 ) hot reload ( 1 ) how to ( 1 ) html ( 1 ) i18n ( 1 ) icon ( 1 ) id ( 1 ) impeller ( 1 ) implementation ( 1 ) import ( 1 ) indicator ( 1 ) inkwell ( 1 ) interrupt ( 1 ) intl ( 1 ) introduction ( 1 ) io ( 1 ) isar ( 1 ) iterable ( 1 ) iteration ( 1 ) javascript ( 1 ) julia ( 1 ) juno ( 1 ) jupyter ( 1 ) kakaomap ( 1 ) keytool ( 1 ) korean ( 1 ) kotlin syntax ( 1 ) l10n ( 1 ) lambda ( 1 ) language ( 1 ) layer ( 1 ) layout ( 1 ) lineageOS ( 1 ) localkey ( 1 ) localtoglobal ( 1 ) long list ( 1 ) ls ( 1 ) mac osx ( 1 ) markdown ( 1 ) markup ( 1 ) material ( 1 ) method ( 1 ) microtask ( 1 ) migrate ( 1 ) mintlify ( 1 ) mock ( 1 ) module ( 1 ) monitor ( 1 ) moor ( 1 ) mouse ( 1 ) mouseregion ( 1 ) multiplatform ( 1 ) multiset ( 1 ) multithread ( 1 ) mutable ( 1 ) mvvm ( 1 ) new ( 1 ) node ( 1 ) nodejs ( 1 ) nosuchmethod ( 1 ) null-safety ( 1 ) numberformat ( 1 ) nvim ( 1 ) object ( 1 ) objectbox ( 1 ) objectkey ( 1 ) obx ( 1 ) online ide ( 1 ) operator ( 1 ) orientation ( 1 ) parabeac ( 1 ) parse ( 1 ) paste ( 1 ) path ( 1 ) pattern ( 1 ) pitfall ( 1 ) play store ( 1 ) pod ( 1 ) podfile ( 1 ) pointer ( 1 ) pointers ( 1 ) powershell ( 1 ) private ( 1 ) programming ( 1 ) pull to refresh ( 1 ) puzzle ( 1 ) pycharm ( 1 ) realitykit ( 1 ) recursion ( 1 ) reduce ( 1 ) reference ( 1 ) regex ( 1 ) regular expression ( 1 ) release note ( 1 ) renderbox ( 1 ) renderobject ( 1 ) repl ( 1 ) repository ( 1 ) response ( 1 ) rm ( 1 ) rotue ( 1 ) round ( 1 ) run ( 1 ) scope ( 1 ) scroll ( 1 ) search ( 1 ) server ( 1 ) serverless ( 1 ) service ( 1 ) sharp ( 1 ) singlerepo ( 1 ) singleton ( 1 ) sketch ( 1 ) sliver ( 1 ) sliverlist ( 1 ) snippets ( 1 ) sogae ( 1 ) sorting ( 1 ) source ( 1 ) sparse ( 1 ) sparse array ( 1 ) spec ( 1 ) split ( 1 ) sqflite ( 1 ) sqlite ( 1 ) sqrt decomposition ( 1 ) stateful ( 1 ) statefulwidget ( 1 ) step ( 1 ) stepper ( 1 ) string ( 1 ) stringbuffer ( 1 ) stringbuilder ( 1 ) studio ( 1 ) study ( 1 ) sub-directory ( 1 ) svn ( 1 ) swiftui ( 1 ) swipe to refresh ( 1 ) system_alert_window ( 1 ) system_cache ( 1 ) systemnavigator ( 1 ) tail recursion ( 1 ) tailrec ( 1 ) tap test ( 1 ) text ( 1 ) texteditingcontroller ( 1 ) textfield ( 1 ) texttheme ( 1 ) themedata ( 1 ) then ( 1 ) thread ( 1 ) throttle ( 1 ) time ( 1 ) tool ( 1 ) tools ( 1 ) tooltip ( 1 ) ts ( 1 ) tutorial ( 1 ) typescript ( 1 ) ui ( 1 ) unittest ( 1 ) update ( 1 ) usb ( 1 ) utf8 ( 1 ) ux ( 1 ) valuekey ( 1 ) variable ( 1 ) vector ( 1 ) versioncode ( 1 ) very_good ( 1 ) view ( 1 ) vim plugin ( 1 ) vimrc ( 1 ) virtualenv ( 1 ) wasm ( 1 ) web app ( 1 ) webview_flutter ( 1 ) while ( 1 ) widget tree ( 1 ) window ( 1 ) wsl ( 1 ) yield ( 1 ) 강의 ( 1 ) 개발 ( 1 ) 개발 공부 ( 1 ) 공부법 ( 1 ) 그래픽스 ( 1 ) 꼬리재귀 ( 1 ) 꿀팁 ( 1 ) 데노 ( 1 ) 두줄 ( 1 ) 디노 ( 1 ) 번역 ( 1 ) 블록 ( 1 ) 상태관리 ( 1 ) 실험 ( 1 ) 안드로이드 ( 1 ) 안드로이드프로젝트 ( 1 ) 안드로이드프로젝트복사 ( 1 ) 어이없는 ( 1 ) 조건부 임포트 ( 1 ) 주절주절분노조절실패의식으흐름 ( 1 ) 패키지 ( 1 ) 프로젝트복사 ( 1 ) 플러그인 ( 1 )