LoginSignup
20

More than 5 years have passed since last update.

posted at

updated at

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

  • おすすめの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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
20