使用Node.js构建实时Markdown编辑器

最新推荐文章于 2024-04-24 22:50:14 发布

VIP文章 culiu9261

最新推荐文章于 2024-04-24 22:50:14 发布

阅读量736

点赞数

文章标签： vue java javascript html5 git ViewUI

原文链接：https://scotch.io/tutorials/building-a-real-time-markdown-viewer

版权

介绍 (Intro)

Markdown is a popular text format written in an easy-to-read way and is convertible to HTML. It is a markup format that has been popularized by sites such as Github and Stack Overflow. Today we will be building an app that let's us view the raw markdown on the left side and the converted markdown (to HTML) on the right side. We will also allow multiple people to work on the same markdown document at the same time via a shareable URL and all changes will be saved.

Markdown是一种流行的文本格式，易于阅读，并且可以转换为HTML。这是一种标记格式，已被Github和Stack Overflow等网站所普及。今天，我们将构建一个应用程序，让我们在左侧查看原始markdown，在右侧查看转换的markdown（至HTML）。我们还将允许多个人通过可共享的网址同时处理同一个Markdown文档，并且所有更改都将被保存。

设置节点 (Setup Node)

Let's get started on our real time markdown viewer app. We will be creating our backend in Node for this application. Create a project directory and then from the command line run the following:

让我们开始使用我们的实时降价查看器应用程序。我们将在Node中为此应用程序创建后端。创建一个项目目录，然后从命令行运行以下命令：

npm init

This will prompt us with several questions. You can fill in the prompts accordingly. This will create a package.json file. Here is my sample package.json file.

这将提示我们几个问题。您可以相应地填写提示。这将创建一个package.json文件。这是我的示例package.json文件。

{
      "name": "RealtimeMarkdownViewer",
      "description": "Realtime Markdown Viewer",
      "main": "server.js",
      "version": "1.0.0",
      "repository": {
        "type": "git",
        "url": "[email protected]:sifxtreme/realtime-markdown.git"
      },
      "keywords": [
        "markdown",
        "realtime",
        "sharejs"
      ],
      "author": "Asif Ahmed",
      "dependencies": {
        "express": "^4.12.4",
        "ejs": "^2.3.1",
        "redis": "^0.10.3",
        "share": "0.6.3"
      },
      "engines": {
        "node": "0.10.x",
        "npm": "1.3.x"
      }
    }

Now let's create a server.js file in our root directory. This will be the main server file. We will be using Express as our web application framework. Using Express makes building a server simpler. With Express we will be using EJS for our view templates. To install Express and EJS run the following commands:

现在，让我们在根目录中创建一个server.js文件。这将是主服务器文件。我们将使用Express作为我们的Web应用程序框架。使用Express可以简化服务器的构建。使用Express，我们将使用EJS作为视图模板。要安装Express和EJS，请运行以下命令：

node install --save express
node install --save ejs

Also create a views folder and a public folder in the root directory.. The views folder is where we will be putting our EJS templates and the public folder is where will be serving our assets (stylesheets, javascript files, images). Now, we are ready to add some code to our server.js file.

还可以创建一个views文件夹和一个public的根目录文件夹。该views文件夹是我们将会把我们的EJS模板和public文件夹是将服务于我们的资产（样式表，JavaScript文件，图像）。现在，我们准备将一些代码添加到我们的server.js文件中。

// server.js

var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// public folder to store assets
app.use(express.static(__dirname + '/public'));

// routes for app
app.get('/', function(req, res) {
  res.render('pad');
});

// listen on port 8000 (for localhost) or the port defined for heroku
var port = process.env.PORT || 8000;
app.listen(port);

Here we require the Express module, set the rendering engine to EJS, and we have a route for our home page. We also set the public directory to be a static directory. Lastly we set the server to listen on port 8000. From our home route, we will be rendering a file called pad.ejs from the view directory. This is a sample views/pad.ejs file.

在这里，我们需要Express模块，将渲染引擎设置为EJS，并且我们的主页具有路由。我们还将public目录设置为静态目录。最后，我们将服务器设置为侦听端口8000。从本地路由开始，我们将从view目录中渲染一个名为pad.ejs的文件。这是一个示例views/pad.ejs文件。

<!-- views/pad.ejs -->

<!DOCTYPE html>
<html>
<head> 
    <title>Realtime Markdown Viewer</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container-fluid">
Hello World!
</body>
</html>

For styling, we added Bootstrap. Let's start up our node server (node server.js) and go http://localhost:8000 in our web browser. You should see something like this:

对于样式，我们添加了Bootstrap 。让我们启动节点服务器（ node server.js ），并在Web浏览器中进入http://localhost:8000 。您应该会看到以下内容：

最低0.47元/天解锁文章

culiu9261

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Node.js构建实时Markdown编辑器

介绍 (Intro)Markdown is a popular text format written in an easy-to-read way and is convertible to HTML. It is a markup format that has been popularized by sites such as Github and Stack Overflow. Tod...
复制链接

扫一扫