Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away