Nội dung bài viết
Video học lập trình mỗi ngày
Markdown là một ngôn ngữ lightweight có tính năng cung cấp một cách đơn giản để thêm 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ẽ học làm thế nào để chuyển đổi HTML sang Markdown trên hai dạng đó là môi trường Node.js và vanilla javascript.
Note: Bài viết nằm trong serires - Tips javascipt
html to markdown nodejs
Trong rất nhiều trường hợp sẽ sử dụng Node.js để convert html to 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.
Install package npm
$ npm install turndown --save
Cách sử dụng turndown
Giờ đây, 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 code 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(`
<h1>JavaScript for Beginners</h1>
<p>Follow <a href="https://anonystick.com">anonystick</a> to learn <b>JavaScript</b> from scratch!</p>
`);
// 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!
Using Vanilla JavaScript
Có lẽ tôi không nhầm 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 tại đó.
Đối với Turndown bạn nào muốn sử dụng trên browser để chuyển đổi từ HTML sang Markdown thì cũng ok. Chỉ cần đưa link js này vào:
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
Và cách sử dụng cũ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(`
<h1>JavaScript for Beginners</h1>
<p>Follow <a href="https://anonystick.com">anonystick</a> to learn <b>JavaScript</b> from scratch!</p>
`);
// output Markdown
console.log(markdown);
Convert DOM to Markdown
Ngoài 2 vấn đề trên được turndown giải quyết thì 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 <body> to Markdown
const markdown = turndownService.turndown(document.body);
// convert first <p> tag to Markdown
const markdown = turndownService.turndown(document.querySelector('p'));
Tóm lại
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ệv với Markdown.
Ref: attacomsian, How can I convert HTML to markdown?
