概要
- Markdownをgulpを使いhtml出力
- jadeを使いヘッドタグを生成しutf-8とcssを適用
- markdownファイルにゴミが入らないように出力
- html整形(おまけ)
実行環境
- Windows 8.1
- node v0.11.11
- gulp 3.9.0
構成
│ gulpfile.coffee
│ package.json
└─src
└─md
│ readme.md
│
└─.template
_template.css
_template.jade
Markdownファイルは不要な構文も含まれるため「src」の中に入れておきます。
パッケージのインストール
npm i -D coffee-script gulp gulp-front-matter gulp-html-prettify gulp-layout gulp-markdown jade
INPUT
Markdownファイル
markdownファイルを適当に作成します。
先頭の7行は(---から---)は後ほど説明します。
src/md/readme.md
---
title: "my title"
description: "my description"
keywords: ["my keyword1", "my keyword2", "my keyword3"]
robots: ["index","follow", "noodp", "noydir", "noarchive"]
layout: "src/md/.template/_template.jade"
---
#Markdownをutf-8でhtml出力する(styleも適用)
## Demo
デモとかです。
<http://qiita.com/>
## Building
git clone xxxxxxxxxx
##See
### Hoge
* [Google](https://www.google.co.jp/)
* [Yahoo! JAPAN](http://www.yahoo.co.jp/)
テンプレート
src/md/readme.mdの(layoutを除く)先頭7行で指定したパラメータが下記で展開されます。
layoutはこのファイルのパスを記述する必要があります。
jadeの構文になりますが「include _template.css」の部分で外部cssをインラインで展開するようにしています。
!= contentsの部分にmaekdownの先頭7行目以降のhtmlが展開されます。
共通のヘッダー、フッターを加えたい場合などはbodyに適宜記述してください。
src/md/.template/_template.jade
doctype html
html(lang="ja")
head
meta(charset="utf-8")
block meta
meta(name='viewport', content='width=device-width, initial-scale=1')
meta(name="description", content=description)
meta(name="keywords", content=keywords)
meta(name="robots", content=robots)
title= title
style
include _template.css
body
!= contents
テンプレートで使うスタイル
src/md/.template/_template.css
・・・好きに書いてください・・・
私はgithubスタイルを適用したかったため以下からダウンロードし適用しました。
https://gist.github.com/andyferra/2554919
Gulpfile
gulpfile.coffee
gulp = require "gulp"
frontMatter = require "gulp-front-matter"
prettify = require "gulp-html-prettify"
layout = require "gulp-layout"
markdown = require "gulp-markdown"
gulp.task "markdown", ->
gulp.src ["src/md/**/*.md"], base: "src/md"
.pipe frontMatter
remove: true
.pipe gulp.dest "."
.pipe markdown()
.pipe layout (file) ->
file.frontMatter
.pipe prettify
indent_char: "\t"
indent_size: 1
.pipe gulp.dest "."
gulp.task "watch", ->
gulp.watch "src/md/**/*.md", ["markdown"]
gulp.task "default", ["watch"]
Output
上記のmarkdownタスクを実行すると以下の2ファイルがプロジェクトルートに生成されます。
mdファイルの出力が不要な場合はmarkdownタスクの5行目の「.pipe gulp.dest "."」を削除してください。
html整形(prettify)はおまけですので不要な場合は削除してください。
Markdownファイル
readme.md
#Markdownをutf-8でhtml出力する(styleも適用)
## Demo
デモとかです。
<http://qiita.com/>
## Building
git clone xxxxxxxxxx
##See
### Hoge
* [Google](https://www.google.co.jp/)
* [Yahoo! JAPAN](http://www.yahoo.co.jp/)
HTMLファイル
readme.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="my description">
<meta name="keywords" content="my keyword1,my keyword2,my keyword3">
<meta name="robots" content="index,follow,noodp,noydir,noarchive">
<title>my title</title>
<style>{{src/md/.template/_template.cssの内容}}</style>
</head>
<body>
<h1 id="markdown-utf-8-html-style-">Markdownをutf-8でhtml出力する(styleも適用)</h1>
<h2 id="demo">Demo</h2>
<p>デモとかです。</p>
<p><a href="http://qiita.com/">http://qiita.com/</a>
</p>
<h2 id="building">Building</h2>
<pre><code>git clone xxxxxxxxxx
</code></pre>
<h2 id="see">See</h2>
<h3 id="hoge">Hoge</h3>
<ul>
<li><a href="https://www.google.co.jp/">Google</a>
</li>
<li><a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
</li>
</ul>
</body>
</html>
HTMLファイル(readme.html)のキャプチャ
