Node.js
Markdown
Jade
gulp

Markdownをgulpを使いutf-8でhtml出力する(styleも適用)

More than 1 year has passed since last update.


概要


  • 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)のキャプチャ

fig.png