ATOM
AtomDay 7

Atom Markdown Previewのhtmlファイル出力にcssを埋め込む

More than 1 year has passed since last update.
  • おすすめの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