なんだかGoodVibes

日々の勉強メモです。

【Node】Markdown変換ツール(markdown-it)

Node.js

こんにちは。
本日は、Markdown変換ツールの作成です。


概要

以下の3つのパーツでできています。

  • 入力エリア
  • 変換ボタン
  • Markdownエリア

入力フォームにMarkdownの記法でテキストを入力し、
変換ボタンを押すとMarkdownエリアに変換して表示するツールです。


ソースの構成は以下です。

-- app.js
-- public
  -- stylesheets
    --style.css
-- views
  -- index.ejs


Markdown変換のために使用したモジュールは
markdown-itです。
事前にnpmでインストールしてください。


サンプルソース

app.jsとindex.ejsの紹介を行います。
style.cssは好きなように書いてもらえればいいかと思います。


app.js

内容はシンプルです。
最初にアクセスされた際は
入力エリア、Markdownエリアを空にして表示を行います。
変換ボタンを押されたときは、app.postの処理で
入力されたデータをmarkdown-itでHTMLに変換して表示を行います。

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

// Markdown変換用のモジュール
var MarkdowsIt = require('markdown-it');
var markdown = new MarkdowsIt();

var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

// アクセス時の表示処理
app.get('/', (req, res, next) => {
    var data = {
        title: 'Index',
        source: '',
        content: ''
    };

    res.render('index', data);
});

// 変換ボタンを押された時の処理
app.post('/', (req, res, next) => {
    var source = req.body.source;

    // Markdown形式で入力されたテキストをHTMLに変換
    var content = markdown.render(source);

    var data = {
        title: 'Index',
        source: source,
        content: content
    };

    res.render('index', data);
});

var server = app.listen(3000, () => {
    console.log('Server start!');
});


index.ejs
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
<body>
    <form action="/" method="POST">
        <table>
            <tr><th>入力エリア</th></tr>
            <tr><td>
                <textarea name="source" cols="80" rows="5"><%= source %></textarea>
            </td></tr>
            <tr><td><input type="submit" value="変換"></td></tr>
        </table>
    </form>
    <div>
        <%- content %>
    </div>
</body>
</html>



<form action="/" method="POST">
    .....
</form>

の部分が入力エリア、

<div>
    <%- content %>
</div>

の部分がMarkdownエリアになります。


まとめ

よくMarkdownで書くのでツール作ってみました。
変換は非常に簡単にできましたね。
今回は、変換するだけのサンプルでしたが
応用することで色々な場面で使用できるかと思います。
以上です。