showdownでMarkdownテンプレートをHTML文章に手元でお手軽コンバート
はじめに
日頃使っていたWordPress投稿用VimプラグインがDevIO側の更新によってブログ投稿に利用できなくなり、他の投稿方法について模索していました。投稿フォーム上でMarkdownを使う方法もありますが、利用できるMarkdownの種類や入れ子等には制限が掛かります。
色々なライブラリを試していたところ、
- Terminal上でMarkdownからHTMLに変換しつつ
- 実ファイル生成を経由せず
- クリップボード経由でペースト対応が可能になる
という願望を満たせるCLIshowdownを見つけました。使い勝手について書いてみました。
必要としたもの
今回必須とした条件は以下の通り。
- Terminal上で完了出来ること
- 記述した内容以外が自動補完されないこと(Header等)
- HTMLのみの出力
GUIのアプリケーションとなると自動化が難しくなることと、記事文面だけでよいのでMeta要素やCSSは要りません。
ライブラリの検討
幾つものライブラリから、都合よく条件をすべて満たすものがありました。それがshowdown。
Pandocも使ってみましたが、単独で完結したページを作る場合には適していると感じました。
使い方
今回求めていた使い方は、wikiの1ページにまとめられています。JavaScriptによる文章の加工編集に重きがあるライブラリで、MarkdownをHTMLにコンバートするのはそのうちの一機能のようです。
尚、cliとしてのコマンドはshowdown makehtmlのみです。makehtmlコマンドのみでも良さそうに思えましたが、yargs/yargsにてshowdownファイルにmakehtmlというコマンドを追加しているという扱いになっています。
変換してクリップボードに追加
% echo '#test' > test.md % showdown makehtml -i test.md | pbcopy Enabling option ghCodeBlocks Enabling option encodeEmails … Reading data from file… Parsing markdown… Writing data to stdout… DONE!
htmlに変換してtest.htmlとして保存
% echo '#test' > test.md % showdown makehtml -i test.md -o test.html Enabling option ghCodeBlocks Enabling option encodeEmails ... Reading data from file... Parsing markdown... Writing data to file... DONE! % cat test.html <h1 id="test">test</h1>
html変換して標準出力
% echo '#test' > test.md % showdown makehtml -i test.md Enabling option ghCodeBlocks Enabling option encodeEmails ... Reading data from file... Parsing markdown... Writing data to stdout... <h1 id="test">test</h1> DONE!
既存のbug
標準入力の読み込みに失敗します。
% echo "# test" | showdown makehtml Enabling option ghCodeBlocks Enabling option encodeEmails … Reading data from stdin… ERROR: Could not read from stdin, reason: The "buffer" argument must be one of type Buffer, TypedArray, or DataView. Received type number
CLIの紹介では可能とありますが、現在は正常に動作していないようです。
Input source. Usually a md file. If omitted or empty, reads from stdin
あとがき
DevIO執筆のために探して見つけたライブラリでした。使い方次第ですが、テンプレートとして利用しているHTMLタグが入れ子等のないシンプルなものであれば、テンプレートをmarkdownで作って変換するとHTMLタグ整形の手間が省けそうです。
![[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-cd051e80347b7e8a807fef242f24e718/ccaa2ddf9bcf8223013f2ee1cc04ed9a/amazon-transcribe)
