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の内容を下記に示します。

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.

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についての記事を書こうと思います。