Markdown là một ngôn ngữ nhẹ có tính năng cung cấp một cách đơn giản để bổ sung các định dạng HTML như tiêu đề, in đậm, nghiêng, danh sách có dấu đầu dòng, hình ảnh, v. v. Và trong bài viết này, bạn sẽ tìm hiểu cách nào để chuyển đổi HTML sang Markdown trên hai định dạng đó là Node môi trường. js và vanilla javascript

Ghi chú. Bài viết nằm trong series - Thủ thuật javascript

html để đánh dấu nodejs

Trong rất nhiều trường hợp sẽ sử dụng Node. js để chuyển html sang markdown. Làm sao có thể làm được điều đó, không quá phức tạp khi bạn sử dụng một trong những thư viện tốt hiện nay đó là turndown

Cài đặt gói npm

$ npm install turndown --save

Cách sử dụng turndown

Bây giờ, bạn có thể sử dụng API Turndown để dễ dàng chuyển đổi bất kỳ chuỗi HTML nào thành Markdown, với mã như sau

// import Turndown module
const TurndownService = require('turndown');
// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    
JavaScript for Beginners
    
Follow anonystick to learn JavaScript from scratch!
`);

// output Markdown
console.log(markdown);

Kết quả ta thu được như sau

JavaScript for Beginners
========================

Follow [Atta](https://anonystick.com/) to learn **JavaScript** from scratch!

Sử dụng Vanilla JavaScript

Có thể tôi nhầm lẫn thì cụm từ vanilla javascript sẽ có nhiều bạn chưa biết nếu mới bắt đầu học javascript. Nhưng không sao, tôi đã để link liên kết bạn nào muốn tìm hiểu thì có thể đọc được đó

Đối với Turndown bạn nào muốn sử dụng trên trình duyệt để chuyển đổi từ HTML sang Markdown thì cũng ok. Chỉ cần đưa liên kết js này vào

Và cách sử dụng cũng giống như tôi trình bày ở trên, chỉ khác là bạn không cần require nữa mà thôi

// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    
JavaScript for Beginners
    
Follow anonystick to learn JavaScript from scratch!
`);

// output Markdown
console.log(markdown);

Chuyển đổi DOM thành Markdown

Ngoài 2 vấn đề trên được giải quyết bởi turndown, trường hợp chuyển đổi DOM sang Markdown cũng không thành vấn đề, chỉ cần làm như sau

// convert document  to Markdown
const markdown = turndownService.turndown(document.body);

// convert first 
 tag to Markdown
const markdown = turndownService.turndown(document.querySelector('p'));

Tóm tắt

Qua bài hướng dẫn trên, chúng ta biết thêm một kỹ năng khác, có thể giúp chúng ta trong tương lai khi làm việc với

// import Turndown module
const TurndownService = require('turndown');
// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    
JavaScript for Beginners
    
Follow anonystick to learn JavaScript from scratch!
`);

// output Markdown
console.log(markdown);

0

Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "chộp lấy" một đối tượng và kéo nó đến một vị trí khác

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ Kéo và Thả đầy đủ

APIDrag và Drop4. 09. 03. 56. 012. 0

---

Ví dụ Kéo và Thả HTML

Ví dụ dưới đây là một ví dụ kéo và thả đơn giản

Thí dụ

Tự mình thử »

Nó có vẻ phức tạp, nhưng chúng ta hãy đi qua tất cả các phần khác nhau của sự kiện kéo và thả

---

---

Tạo một phần tử có thể kéo được

Đầu tiên. Để làm cho một phần tử có thể kéo được, hãy đặt thuộc tính

// import Turndown module
const TurndownService = require('turndown');
// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    
JavaScript for Beginners
    
Follow anonystick to learn JavaScript from scratch!
`);

// output Markdown
console.log(markdown);

1 thành true

---

Kéo cái gì - ondragstart và setData()

Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử được kéo

Trong ví dụ trên, thuộc tính

// import Turndown module
const TurndownService = require('turndown');
// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    
JavaScript for Beginners
    
Follow anonystick to learn JavaScript from scratch!
`);

// output Markdown
console.log(markdown);

2 gọi một hàm, kéo(sự kiện), chỉ định dữ liệu nào sẽ được kéo

Phương thức

// import Turndown module
const TurndownService = require('turndown');
// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    
JavaScript for Beginners
    
Follow anonystick to learn JavaScript from scratch!
`);

// output Markdown
console.log(markdown);

3 đặt kiểu dữ liệu và giá trị của dữ liệu được kéo

hàm kéo(ev) {
  ev. truyền dữ liệu. setData("văn bản", ev. Mục tiêu. là);
}

Trong trường hợp này, kiểu dữ liệu là "văn bản" và giá trị là id của phần tử có thể kéo được ("drag1")

---

Thả ở đâu - ondragover

Sự kiện

// import Turndown module
const TurndownService = require('turndown');
// create an instance of Turndown service
const turndownService = new TurndownService();

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    
JavaScript for Beginners
    
Follow anonystick to learn JavaScript from scratch!
`);

// output Markdown
console.log(markdown);

4 chỉ định nơi dữ liệu được kéo có thể bị xóa

Theo mặc định, không thể bỏ dữ liệu/phần tử vào các phần tử khác. Để cho phép giảm, chúng ta phải ngăn việc xử lý phần tử mặc định