- おすすめのMarkdownエディタは何？ときかれたらAtomをおすすめします。
- markdown自体での編集・配布はとても快適です。ただ、htmlファイル保存はプレビュー画面で表示されるcssが適用されなくて悲しい気持ちになるので、機能追加されるまでの対処方法をまとめておきます。
CSS作成
lessファイルダウンロード
- 依存関係のあるlessを含めてダウンロード
$ curl https://raw.githubusercontent.com/atom/markdown-preview/master/stylesheets/markdown-preview.less > markdown-preview.less
$ curl https://raw.githubusercontent.com/atom/template-syntax/master/stylesheets/colors.less > colors.less
$ curl https://raw.githubusercontent.com/atom/template-syntax/master/stylesheets/syntax-variables.less > syntax-variables.less
Less Compiler入手
- npmでインストールできるlessに含まれているのでインストールする。
$ npm install less
CSS変換
- lesscコマンドでlessをcssに変換する。
$ ~/node_modules/less/bin/lessc markdown-preview.less > markdown-preview.css
埋め込みスクリプト
スクリプト作成
-
markdown-preview.cssと同じフォルダにシェルスクリプト(md-html-with-css.sh)を作成する。 - ブラウザによっては日本語が文字化けするのでついでに対応。
#!/bin/sh
body=`cat $1`
css=`cat $(dirname $0)/markdown-preview.css`
html="<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>
${css}
</style>
</head>
<body class='markdown-preview'>
${body}
</body>
</html>"
echo "${html}"
スクリプト実行方法
- Markdown PreviewのSave As HTMLで保存したhtmlファイルを指定すると、埋め込んだ結果を出力する。
$ md-html-with-css.sh test.md.html