HTML để đánh dấu - npm

Sameer Borate là nhà phát triển web tự do, làm việc chủ yếu bằng PHP và MySQL. Anh ấy viết blog về các sở thích và chủ đề web khác nhau của mình tại www. codediesel. com. Khi … Thông tin thêm về Sameer ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

  • HTML để đánh dấu - npm
    Các mẫu thiết kế giao diện Đào tạo UX

  • HTML để đánh dấu - npm
    Lớp học tổng thể về nguyên tắc phổ quát của kiểu chữ với Elliot Jay Stocks

  • HTML để đánh dấu - npm
    Bắt đầu miễn phí

  • HTML để đánh dấu - npm
    Thử ngay bây giờ
  • HTML để đánh dấu - npm
    Giao diện người dùng SmashingConf 2023

  • HTML để đánh dấu - npm

Giai đoạn 1. Cài đặt nhanh

Giả sử bạn đã cài đặt Node. js trên hệ thống của bạn, hãy tạo một thư mục để chứa ứng dụng của bạn (hãy gọi nó là “

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
2”) và chuyển sang thư mục đó

$ mkdir markdown-api
$ cd markdown-api

Sử dụng lệnh npm init để tạo gói. json cho ứng dụng của bạn. Lệnh này nhắc bạn về một số thứ như tên và phiên bản ứng dụng của bạn

Hiện tại, chỉ cần nhấn Enter để chấp nhận giá trị mặc định cho hầu hết chúng. Tôi đã sử dụng tệp điểm vào mặc định làm chỉ mục. js, nhưng bạn có thể thử ứng dụng. js hoặc một số khác tùy thuộc vào sở thích của bạn

Bây giờ hãy cài đặt Express trong thư mục

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
2 và lưu nó trong danh sách phụ thuộc

$ npm install express --save

Tạo một chỉ mục. js trong thư mục hiện tại (

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
2) và thêm đoạn mã sau để kiểm tra xem khung Express đã được cài đặt đúng chưa

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);

Bây giờ duyệt đến URL

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
5 để kiểm tra xem tệp thử nghiệm có hoạt động bình thường không. Nếu mọi thứ đều theo thứ tự, chúng ta sẽ thấy Hello World. ’ lời chào trong trình duyệt và chúng tôi có thể tiến hành xây dựng API cơ sở để chuyển đổi Markdown sang HTML

giai đoạn 2. Xây dựng API cơ sở

Mục đích chính của API của chúng tôi là chuyển đổi văn bản theo cú pháp Markdown sang HTML. API sẽ có hai điểm cuối

  • Const express = require('express');
    var app = express();
     
    app.get('/', function(req, res){
        res.send('Hello World!');
    });
     
    app.listen(3000);
    
    6
  • Const express = require('express');
    var app = express();
     
    app.get('/', function(req, res){
        res.send('Hello World!');
    });
     
    app.listen(3000);
    
    7

Điểm cuối

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
8 sẽ cho phép ứng dụng xác thực các yêu cầu hợp lệ trong khi điểm cuối
Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
9 sẽ chuyển đổi (rõ ràng) Markdown sang HTML

Dưới đây là mã API cơ sở để gọi hai điểm cuối. Lệnh gọi

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
8 chỉ trả về một chuỗi “Đã xác thực”, trong khi lệnh gọi
Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
9 trả về bất kỳ nội dung Markdown nào mà bạn đã gửi cho ứng dụng. Phương thức home chỉ trả về 'Xin chào thế giới. ' chuỗi

$ mkdir markdown-api
$ cd markdown-api
3

Chúng tôi sử dụng phần mềm trung gian

$ mkdir markdown-api
$ cd markdown-api
32 để giúp dễ dàng phân tích các yêu cầu đến ứng dụng. Phần mềm trung gian sẽ cung cấp tất cả các yêu cầu đến cho bạn trong thuộc tính
$ mkdir markdown-api
$ cd markdown-api
33. Bạn có thể làm mà không cần phần mềm trung gian bổ sung nhưng việc thêm phần mềm này giúp phân tích các tham số yêu cầu đến dễ dàng hơn nhiều

Bạn có thể cài đặt

$ mkdir markdown-api
$ cd markdown-api
32 đơn giản bằng cách sử dụng npm

$ mkdir markdown-api
$ cd markdown-api
7

Bây giờ chúng tôi đã có các chức năng sơ khai giả của mình, chúng tôi sẽ sử dụng Postman để kiểm tra tương tự. Trước tiên hãy bắt đầu với một cái nhìn tổng quan ngắn gọn về Postman

Tổng quan về người đưa thư

Postman là một công cụ phát triển API giúp dễ dàng xây dựng, sửa đổi và kiểm tra các điểm cuối API từ bên trong trình duyệt hoặc bằng cách tải xuống ứng dụng dành cho máy tính để bàn (phiên bản trình duyệt hiện không được dùng nữa). Nó có khả năng thực hiện nhiều loại yêu cầu HTTP khác nhau, tôi. e. NHẬN, ĐĂNG, ĐẶT, VÁ. Nó có sẵn cho Windows, macOS và Linux

Đây là giao diện của Postman

HTML để đánh dấu - npm
(Xem trước lớn)

Để truy vấn điểm cuối API, bạn cần thực hiện các bước sau

  1. Nhập URL mà bạn muốn truy vấn vào thanh URL ở phần trên cùng;
  2. Chọn phương thức HTTP ở bên trái của thanh URL để gửi yêu cầu;
  3. Nhấp vào nút 'Gửi'

Người đưa thư sau đó sẽ gửi yêu cầu đến ứng dụng, lấy bất kỳ phản hồi nào và hiển thị nó ở cửa sổ bên dưới. Đây là cơ chế cơ bản về cách sử dụng công cụ Postman. Trong ứng dụng của chúng tôi, chúng tôi cũng sẽ phải thêm các tham số khác vào yêu cầu, sẽ được mô tả trong các phần sau

Sử dụng người đưa thư

Bây giờ chúng ta đã thấy tổng quan về Postman, hãy tiếp tục sử dụng nó cho ứng dụng của chúng ta

Bắt đầu ứng dụng

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
2 của bạn từ dòng lệnh

$ mkdir markdown-api
$ cd markdown-api
9

Để kiểm tra mã API cơ sở, chúng tôi thực hiện lệnh gọi API tới ứng dụng từ Postman. Lưu ý rằng chúng tôi sử dụng phương thức POST để truyền văn bản để chuyển đổi sang ứng dụng

Ứng dụng hiện tại chấp nhận nội dung Markdown để chuyển đổi thông qua tham số POST

$ mkdir markdown-api
$ cd markdown-api
36. Điều này chúng tôi chuyển qua dưới dạng định dạng được mã hóa URL. Hiện tại, ứng dụng trả về nguyên văn chuỗi ở định dạng JSON — với trường đầu tiên luôn trả về chuỗi
$ mkdir markdown-api
$ cd markdown-api
37 và trường thứ hai trả về văn bản đã chuyển đổi. Sau này, khi chúng ta thêm mã xử lý Markdown, nó sẽ trả về văn bản đã chuyển đổi

Giai đoạn 3. Thêm bộ chuyển đổi Markdown

Với giàn giáo ứng dụng hiện đã được xây dựng, chúng tôi có thể xem xét thư viện JavaScript

$ mkdir markdown-api
$ cd markdown-api
38 mà chúng tôi sẽ sử dụng để chuyển đổi Markdown sang HTML. Showdown là trình chuyển đổi Markdown sang HTML hai chiều được viết bằng JavaScript cho phép bạn chuyển đổi Markdown sang HTML và ngược lại

HTML để đánh dấu - npm
(Xem trước lớn)

Cài đặt gói sử dụng npm

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
3

Sau khi thêm mã giới thiệu cần thiết vào giàn giáo, chúng tôi nhận được kết quả sau

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
4

Mã bộ chuyển đổi chính nằm ở điểm cuối

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
7 như được trích xuất và hiển thị bên dưới. Điều này sẽ chuyển đổi bất kỳ văn bản Markdown nào bạn đăng thành phiên bản HTML và trả về dưới dạng tài liệu JSON

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
6

Phương thức thực hiện chuyển đổi là

$ mkdir markdown-api
$ cd markdown-api
70. Chúng tôi có thể đặt các tùy chọn khác nhau cho chuyển đổi Markdown bằng phương pháp
$ mkdir markdown-api
$ cd markdown-api
71 với định dạng sau

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
9

Vì vậy, ví dụ: chúng tôi có thể đặt tùy chọn để tự động chèn và liên kết một URL được chỉ định mà không cần bất kỳ đánh dấu nào

$ npm install express --save
0

Như trong ví dụ Postman, nếu chúng ta truyền một chuỗi đơn giản (chẳng hạn như

$ mkdir markdown-api
$ cd markdown-api
72) vào ứng dụng, nó sẽ trả về chuỗi sau nếu
$ mkdir markdown-api
$ cd markdown-api
73 được bật

$ npm install express --save
1

Nếu không có tùy chọn, chúng tôi sẽ phải thêm thông tin đánh dấu để đạt được kết quả tương tự

$ npm install express --save
2

Có nhiều tùy chọn để sửa đổi cách xử lý Markdown. Một danh sách đầy đủ có thể được tìm thấy trên trang web Showdown

Vì vậy, bây giờ chúng tôi có một trình chuyển đổi Markdown-to-HTML đang hoạt động với một điểm cuối duy nhất. Hãy để chúng tôi tiến xa hơn và thêm xác thực để có ứng dụng

giai đoạn 4. Thêm xác thực API bằng Passport

Việc hiển thị API ứng dụng của bạn với thế giới bên ngoài mà không có xác thực phù hợp sẽ khuyến khích người dùng truy vấn điểm cuối API của bạn mà không có hạn chế nào. Điều này sẽ mời các phần tử vô đạo đức lạm dụng API của bạn và cũng sẽ tạo gánh nặng cho máy chủ của bạn với các yêu cầu không được kiểm duyệt. Để giảm thiểu điều này, chúng ta phải thêm một cơ chế xác thực phù hợp

Chúng tôi sẽ sử dụng gói Hộ chiếu để thêm xác thực vào ứng dụng của mình. Giống như phần mềm trung gian

$ mkdir markdown-api
$ cd markdown-api
32 mà chúng tôi đã gặp trước đó, Passport là phần mềm trung gian xác thực cho Node. js. Lý do chúng tôi sẽ sử dụng Passport là vì nó có nhiều cơ chế xác thực để làm việc với (tên người dùng và mật khẩu, Facebook, Twitter, v.v.) giúp người dùng linh hoạt trong việc chọn một cơ chế cụ thể. Phần mềm trung gian Passport có thể dễ dàng được đưa vào bất kỳ ứng dụng Express nào mà không cần thay đổi nhiều mã

Cài đặt gói sử dụng npm

$ npm install express --save
3

Chúng tôi cũng sẽ sử dụng chiến lược

$ mkdir markdown-api
$ cd markdown-api
75, sẽ được giải thích sau, để xác thực. Vì vậy, cài đặt nó, quá

$ npm install express --save
4

Bạn cũng sẽ cần thêm mô-đun mã hóa và giải mã JWT(JSON Web Token) cho Node. js được sử dụng bởi Hộ chiếu

$ npm install express --save
5

Chiến lược trong hộ chiếu

Hộ chiếu sử dụng khái niệm chiến lược để xác thực yêu cầu. Chiến lược là các phương pháp khác nhau cho phép bạn xác thực các yêu cầu và có thể bao gồm từ trường hợp đơn giản như xác minh thông tin xác thực tên người dùng và mật khẩu, xác thực bằng OAuth (Facebook hoặc Twitter) hoặc sử dụng OpenID. Trước khi xác thực yêu cầu, chiến lược được ứng dụng sử dụng phải được định cấu hình

Trong ứng dụng của chúng tôi, chúng tôi sẽ sử dụng sơ đồ xác thực tên người dùng và mật khẩu đơn giản, vì nó đơn giản để hiểu và viết mã. Hiện tại, Passport hỗ trợ hơn 300 chiến lược có thể tìm thấy tại đây

Mặc dù thiết kế của Passport có vẻ phức tạp, nhưng việc triển khai mã rất đơn giản. Đây là một ví dụ cho thấy cách trang trí điểm cuối

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
7 của chúng tôi để xác thực. Như bạn sẽ thấy, việc thêm xác thực vào một phương thức khá đơn giản

$ npm install express --save
6

Bây giờ, cùng với chuỗi Markdown được chuyển đổi, chúng tôi cũng phải gửi tên người dùng và mật khẩu. Điều này sẽ được kiểm tra với tên người dùng và mật khẩu ứng dụng của chúng tôi và được xác minh. Vì chúng tôi đang sử dụng chiến lược cục bộ để xác thực, thông tin đăng nhập được lưu trữ trong chính mã đó

Mặc dù điều này nghe có vẻ giống như một cơn ác mộng về bảo mật, nhưng đối với các ứng dụng demo, điều này là đủ tốt. Điều này cũng giúp hiểu quy trình xác thực trong ví dụ của chúng tôi dễ dàng hơn. Ngẫu nhiên, một phương pháp bảo mật phổ biến được sử dụng là lưu trữ thông tin xác thực trong các biến môi trường. Tuy nhiên, nhiều người có thể không đồng ý với phương pháp này, nhưng tôi thấy điều này tương đối an toàn

Ví dụ hoàn chỉnh với xác thực được hiển thị bên dưới

$ npm install express --save
7

Phiên Postman hiển thị chuyển đổi với xác thực được thêm vào được hiển thị bên dưới

HTML để đánh dấu - npm
Thử nghiệm ứng dụng cuối cùng với Postman (Xem trước lớn)

Ở đây chúng ta có thể thấy rằng chúng ta đã có một chuỗi HTML được chuyển đổi thích hợp từ cú pháp Markdown. Mặc dù chúng tôi chỉ yêu cầu chuyển đổi một dòng Markdown, nhưng API có thể chuyển đổi một lượng văn bản lớn hơn

Điều này kết thúc bước đột phá ngắn gọn của chúng tôi vào việc xây dựng điểm cuối API bằng cách sử dụng Node. js và Express. Xây dựng API là một chủ đề phức tạp và có những sắc thái tốt hơn mà bạn nên biết khi xây dựng một API, điều đáng tiếc là chúng tôi không có thời gian ở đây nhưng có lẽ sẽ đề cập đến trong các bài viết sau

Truy cập API của chúng tôi từ một ứng dụng khác

Bây giờ chúng ta đã xây dựng một API, chúng ta có thể tạo một Nút nhỏ. js sẽ chỉ cho bạn cách truy cập API. Ví dụ của chúng tôi, chúng tôi sẽ cần cài đặt gói npm

$ mkdir markdown-api
$ cd markdown-api
77 cung cấp một cách đơn giản để thực hiện các yêu cầu HTTP. (Bạn có thể đã cài đặt cái này. )

$ npm install express --save
8

Mã ví dụ để gửi yêu cầu tới API của chúng tôi và nhận phản hồi được cung cấp bên dưới. Như bạn có thể thấy, gói

$ mkdir markdown-api
$ cd markdown-api
77 đơn giản hóa vấn đề một cách đáng kể. Markdown được chuyển đổi nằm trong biến
$ mkdir markdown-api
$ cd markdown-api
79

Trước khi chạy tập lệnh sau, hãy đảm bảo rằng ứng dụng API mà chúng tôi đã tạo trước đó đang chạy. Chạy đoạn script sau trong một cửa sổ lệnh khác

Ghi chú. Chúng tôi đang sử dụng ký hiệu

$ mkdir markdown-api
$ cd markdown-api
90 để mở rộng nhiều dòng JavaScript cho biến
$ mkdir markdown-api
$ cd markdown-api
79. Đây không phải là một trích dẫn đơn

$ npm install express --save
9

Khi chúng tôi thực hiện yêu cầu POST cho API của mình, chúng tôi cung cấp văn bản Markdown để được chuyển đổi cùng với thông tin đăng nhập. Nếu chúng tôi cung cấp thông tin đăng nhập sai, chúng tôi sẽ nhận được thông báo lỗi

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
0

Đối với yêu cầu được ủy quyền chính xác, Markdown mẫu ở trên sẽ được chuyển thành như sau

Const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);
1

Mặc dù chúng tôi đã mã hóa cứng Markdown tại đây, nhưng văn bản có thể đến từ nhiều nguồn khác — tệp, biểu mẫu web, v.v. Quá trình yêu cầu vẫn như cũ

Lưu ý rằng vì chúng tôi đang gửi yêu cầu dưới dạng loại nội dung

$ mkdir markdown-api
$ cd markdown-api
92; . Như bạn có thể thấy, cần một ví dụ rất nhỏ để kiểm tra hoặc ứng dụng API

Phần kết luận

Trong bài viết này, chúng tôi bắt tay vào hướng dẫn với mục tiêu tìm hiểu cách sử dụng Node, js và Express framework để xây dựng điểm cuối API. Thay vì xây dựng một số ứng dụng giả không có mục đích, chúng tôi đã quyết định tạo một API chuyển đổi cú pháp Markdown thành HTML, giúp liên kết hoặc học tập trong một ngữ cảnh hữu ích. Đồng thời, chúng tôi đã thêm xác thực vào điểm cuối API của mình và chúng tôi cũng đã tìm ra các cách để kiểm tra điểm cuối ứng dụng của mình bằng Postman

Tôi có thể chuyển đổi HTML thành markdown không?

Chúng tôi có thể dễ dàng chuyển đổi HTML thành markdown bằng cách sử dụng gói markdownify .

Làm cách nào để chuyển đổi HTML sang Markdown trong Python?

Mở tệp HTML nguồn bằng Python. Gọi phương thức 'save()', chuyển tên tệp đầu ra bằng phần mở rộng Markdown. Nhận kết quả chuyển đổi HTML dưới dạng Markdown

Markdown trong nút JS là gì?

Tìm hiểu cách sử dụng Nút. js và khung Express để tạo điểm cuối API — trong bối cảnh xây dựng ứng dụng chuyển cú pháp Markdown sang HTML. Markdown là ngôn ngữ đánh dấu văn bản nhẹ cho phép chuyển đổi văn bản được đánh dấu sang các định dạng khác nhau .

NPM được đánh dấu là gì?

⚡ được xây dựng cho tốc độ. ⬇️ trình biên dịch cấp thấp để phân tích cú pháp đánh dấu mà không lưu vào bộ nhớ đệm hoặc chặn trong thời gian dài . ⚖️ trọng lượng nhẹ trong khi triển khai tất cả các tính năng đánh dấu từ các hương vị & thông số kỹ thuật được hỗ trợ. 🌐 hoạt động trong trình duyệt, trên máy chủ hoặc từ giao diện dòng lệnh (CLI)