Fork me on GitHub

10. Markdown

Добро пожаловать в десятую часть руководства по созданию веб-приложения с помощью Node.js. В рамках серии уроков будет рассказано про основные особенности и трудности, которые возникают при работе с Node.js.

Предыдущие части:

10.1. Поддержка Markdown

Было бы здорово, если бы наша записная книжка поддерживала бы какой-нибудь вид разметки. В npm есть несколько markdown-библиотек, самой популярной из которых является markdown.

Чтобы её установить, необходимо выполнить следующее:

npm install markdown

Библиотека достаточно легка в использовании:

var markdown = require('markdown').markdown;
markdown.toHTML('# Welcome\n\nThis is markdown');

// => '<h1>Welcome</h1>\n\n<p>This is markdown</p>'

10.1.1. Подключение Markdown

Я обновил зависимости для Nodepad’a, включив в файл package.json запись о markdown:

// ...
"dependencies": {
  "express": "1.0.0",
  "mongoose": "0.0.4",
  "connect-mongodb": "0.1.1",
  "jade": "0.6.0",
  "markdown": "0.2.0"
}

В начале файла app.js я добавил require:

var express = require('express@1.0.0'),
    app = module.exports = express.createServer(),
    mongoose = require('mongoose@0.0.4').Mongoose,
    mongoStore = require('connect-mongodb@0.1.1'),
    markdown = require('markdown').markdown,
// ...

10.1.2. Документы в HTML формате

Я так же добавил поддержку формата html в обработчик запросов вида /documents/:id.:format?, сутью которого является преобразование markdown в html:

// Считать документ
app.get('/documents/:id.:format?', loadUser, function(req, res, next) {
  Document.findById(req.params.id, function(d) {
    if (!d) return next(new NotFound('Document not found'));

    switch (req.params.format) {
      case 'json':
        res.send(d.__doc);
      break;

      case 'html':
        res.send(markdown.toHTML(d.data));
      break;

      default:
        res.render('documents/show.jade', {
          locals: { d: d, currentUser: req.currentUser }
        });
    }
  });
});

Теперь при обращении к документу с конкретным ID и с окончанием «.html» вернется HTML, сгенерированный с помощью makrdown. Сделать это достаточно легко, использую вызов $.get.

10.1.3. Просмотр Markdown

Рядом с кнопкой «Save» (#html-button) я добавил еще одну ссылку (кнопку), которая показывает текущий markdown текст в HTML виде в отдельном слое:

$('#html-button').click(function() {
  var container = $('#html-container');

  if (container.is(':visible')) {
    container.html('').hide();
    $('#html-button').removeClass('active');

  } else {
    $('#save-button').click();
    $('#html-button').addClass('active');

    var id = $('#document-list .selected').itemID();
    $.get('/documents/' + id + '.html', function(data) {
      // Данные сохранены, вернется JSON
      container.html(data).show();
    });
  }
});

Чтобы определить, виден ли слой, показывающий преобразованный из markdown в HTML текст, используется функция jQuery.is(). Если слой не виден, то при нажатии на кнопку, этой кнопке добавляется класс, обозначающий, что слой виден. Выглядит это следующим образом:

Поддержка markdown в nodepad. Из сериии уроков по node.js

10.2. Кнопка «Удалить»

Макет приложения несколько изменился с тех пор, как началась данная серия уроков, так что я доработал код удаления документа, чтобы он корректно работал с новым расположением элементов. Используется всё тот же jQuery с новым URL для $.post.

10.3. Заключение

Поддержка таких разметок, как markdown или textile, в Node.js приложениях — достаточно простая задача, так как в npm есть все необходимые модули.

Последний коммит для текущей части — 11d33e1.