Node.js 実践講座 事例編 その3 | JadeとMarkdownを使用してHTML文書を生成する

# はじめに
この記事ではJadeとMarkdownを使用してHTML文書を生成する方法を紹介します。

# 全体の流れ
全体の流れを下記に示します。

- ワークスペースの作成
- package.jsonの作成
- パッケージのインストール
- Normalize.cssのダウンロード
- ファイルの編集

# ワークスペースの作成
コマンドを下記に示します。

```
mkdir -p ~/workspace/js/practice/jade-markdown
cd ~/workspace/js/practice/jade-markdown
mkdir src
mkdir src/css
touch src/index.jade
touch src/css/normalize.css
touch src/css/main.css
```

# package.jsonの作成
コマンドを下記に示します。

```
npm init -f
```

# パッケージのインストール
コマンドを下記に示します。

```
npm install --save-dev jade marked jstransformer-marked
```

# Normalize.cssのダウンロード
下記URLよりnormalize.cssをダウンロードして`src/css/normalize.css`に保存します。

- https://necolas.github.io/normalize.css/3.0.2/normalize.css

# ファイルの編集
`src/index.jade`と`src/css/main.css`の内容を下記に示します。

```jade:src/index.jade
doctype html
html(lang='ja')
  head
    meta(charset='UTF-8')
    title Jade Markdown
    style
      include ./css/normalize.css
    style
      include ./css/main.css
  body
    .container
      .buttons.hidden-print
        button(onclick='javascript:window.print();') 印刷

      .content
        .chapter
          :marked
            # Section
            This is a paragraph.

            ## Sub Section
            This is a paragraph.

            ## Sub Section
            This is a paragraph.

        .chapter
          :marked
            # Section
            This is a paragraph.

            ## Sub Section
            This is a paragraph.

            ## Sub Section
            This is a paragraph.
```

```css:src/css/main.css
@charset "UTF-8";
@page { margin: 30mm; }

body {
  font-size: 11pt;
  font-family: serif;
  counter-reset: chapter;
}

h1, h2, h3, h4, h5, h6, button {
  font-family: sans-serif;
  font-weight: normal;
}

h1 {
  font-size: 18pt;
  border-bottom: 1pt solid black;
  width: 100%;
  counter-reset: section;
  counter-increment: chapter;
}

h1:before {
  content: counter(chapter) ". ";
}

h2 {
  font-size: 14pt;
  border-bottom: 1px solid black;
  width: 50%;
  counter-reset: subsection;
  counter-increment: section;
}

h2:before {
  content: counter(chapter) ". " counter(section) ". ";
}

h3 {
  font-size: 12pt;
  counter-increment: subsection;
}

h3:before {
  content: counter(chapter) ". " counter(section) ". " counter(subsection);
}

button {
  padding: 5px;
}

@media screen {
  .container {
    width: 210mm;
    margin-left: auto;
    margin-right: auto;
  }

  .buttons {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: right;
  }

  .chapter {
    border: 1px solid #ccc;
    min-height: 297mm;
    margin-bottom: 15mm;
    padding: 30mm;
  }
}

@media print {
  .hidden-print {
    display: none;
  }

  .chapter {
    page-break-before: always;
  }

  .chapter:first-child {
    page-break-before: avoid;
  }
}

```

# ビルド
`package.json`を編集します。

```
{
  "name": "jade-markdown",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "mkdir dist; node_modules/.bin/jade -o dist -P src/index.jade",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jade": "^1.11.0",
    "jstransformer-marked": "^1.0.1",
    "marked": "^0.3.5"
  }
}

```

変更点は下記の通りです。

```
--- before
+++ after
@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "build": "mkdir dist; node_modules/.bin/jade -o dist -P src/index.jade",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

```

実行コマンドを下記に示します。

```
npm run build
```

# おわりに
今回はElectron.jsを使用してWebアプリケーションをデスクトップアプリケーションにする方法を紹介する予定でしたが、投稿までにしばらく間が空いてしまってので、リハビリを兼ねて簡単な記事を投稿しました。次回こそはElectron.jsについての記事を書こうと思います。